当“下拉菜单值更改”时重新加载 d3 图形答案

【问题标题】：reload d3 graph when a 'dropdown menu value changes当“下拉菜单值更改”时重新加载 d3 图形
【发布时间】：2014-04-16 15:10:45
【问题描述】：

当用户在下拉菜单中选择一个项目时，我试图让我的 d3.js 折线图重新加载，并且数据与该项目相对应。

我的菜单是股票市场价值列表：

YHOO
FB
...

对于其中的每一个，我都有一个包含数据的 JSON 文件。该图本身正在工作。

我把代码放在一个 [JSFiddle] 中，它不起作用，因为它应该使用 d3 和 knockout.js。

使用此Github Gist 可能会更容易。

无论如何，第 83 行之后的代码会针对下拉列表中的每个选项更改 newValue。数据存储在yahoo.json 和fb.json 中。

每次用户在下拉菜单中选择一个带有与该选项关联的数据的新选项时，如何重新加载图表？

非常感谢。

编辑：临时破解

/*User's stock choice*/
var viewModel = {
    choice: ["AAPL", "YHOO", "FB", "MSFT"],
    selectedChoice: ko.observable("two"), /*Knockout.js is used for having an observable array*/
};
viewModel.selectedChoice.subscribe(function(newValue) {
   console.log(newValue);
   if (newValue === "YHOO") {
    d3.select("svg").remove();
    d3.json('yahoo.json', draw);
   } else if (newValue === "FB") {
    d3.select("svg").remove();
    d3.json('fb.json', draw);
   }

});
ko.applyBindings(viewModel);

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

您实际上可以使用 d3 将事件绑定到下拉菜单，然后在发生更改事件时调用函数。该功能将关闭，在您的情况下，从雅虎获取股票价值。唯一真正的技巧是从this 中获取数据。我最终在控制台记录 this 并进行了深入研究，直到找到 __data__。使用 d3 意味着您不需要为此敲除，并且可以从您的示例中删除该代码。

无论如何，要设置它，您需要一个 div 来附加下拉菜单和一组股票名称。您可以使用此股票名称列表来创建下拉菜单，如下所示。

var 名称 = ["AAPL", "YHOO", "FB", "MSFT"];

d3.select("#dropDown")
    .append("select")
    .on("change", function() {
        change(this.options[this.selectedIndex].__data__);
    })
    .selectAll("option")
    .data(names).enter()
    .append("option")
    .text(function(d) {
        return d;
    });

当然，您需要设置更改函数，该函数需要包装调用 Yahoo 所需的所有变量。显然，你需要传入 stock 参数，一旦你从 Yahoo 收到了 json，你就需要调用你的 draw 函数。所以从你的代码中借用这样的东西应该可以工作：

function change(stock) {

    var url = 'http://query.yahooapis.com/v1/public/yql';
    var startDate = '2013-09-06';
    var endDate = '2014-03-06';
    // NB the inclusion of the stock parameter
    var req = encodeURIComponent('select * from yahoo.finance.historicaldata where symbol in ("' + stock + '") and startDate = "' + startDate + '" and endDate = "' + endDate + '"');

    var data = $.getJSON(url, 'q=' + req + "&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json", draw);

}

您必须在加载时调用绘图函数，否则您最终会出现一个空白屏幕，并且还要整理从一个数据集到下一个数据集的转换。

【讨论】：