Question

当用户在下拉菜单中选择项目时，我正在尝试重新加载我的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);

Answer 1

您实际上可以使用d3将事件绑定到下拉菜单，然后在发生更改事件时调用函数。该功能将会消失，在您的情况下，从雅虎获取股票价值。唯一真正的诀窍是从this中获取数据。我结束了控制台记录this并挖掘直到找到__data__。使用d3意味着您不需要敲除此操作，并可以从您的示例中删除该代码。

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

var names = [“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;
    });

当然你需要设置change函数，它需要包含调用Yahoo所需的所有变量。显然，你需要传递stock参数，一旦你从雅虎收到了json，你就需要调用你的绘图功能。所以从你的代码中借用这样的东西应该有效：

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);

}

您必须在加载时调用绘图功能，否则您将最终得到一个空白屏幕，并且还要从一个数据集转换到下一个数据集。

当＆＃39;下拉菜单值更改时重新加载d3图表

1 个答案: