下拉菜单值更改时重新加载d3图 [英] reload d3 graph when a 'dropdown menu value changes

问题描述

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

I am trying to get my d3.js line chart reloading when the user chooses an item in a dropdown menu, with the data corresponding to this item.

我的菜单是股票市场价格的列表:

My menu is a list of stock market values:

• YHOO
• FB
• ...

对于每一个，我都有一个包含数据的JSON文件. 该图形本身正在运行.

For each of these, I have a JSON file with the data. The graph in itself is working.

我将代码放在[JSFiddle]中，该代码不起作用，因为它应该使用d3和kickout.js.

I put the code in a [JSFiddle], which doesn't work because it is supposed to use d3 and knockout.js.

使用此 Github Gist 可能更容易工作.

It may be easier to work from this Github Gist.

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

Anyway, the code past line 83 changes newValue for each choice in the dropdown. The data is stored in yahoo.json and fb.json.

每次用户在下拉菜单中选择一个新选项以及与该选项相关联的数据时，如何重新加载图形?

How can I have the graph reloading each time the user selects a new choice in the dropdown menu with the data associated with this choice?

非常感谢您.

临时黑客

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

推荐答案

您实际上可以使用d3将事件绑定到下拉菜单，然后在发生on change事件时调用函数.该功能将关闭，并且在您的情况下，将从Yahoo获取股票价值.唯一真正的把戏是从this中获取数据.我结束了控制台记录this并进行了挖掘，直到找到__data__.使用d3意味着您不需要删除，可以从示例中删除该代码.

You can actually use d3 to bind events to the dropdown menu and then call a function when an on change event occurs. The function would go off and, in your case, grab the stock values from Yahoo. The only real trick is getting the data out of this. I ended up console logging this and digging through until I found __data__. Using d3 means you don't need knockout for this and can remove that code from your example.

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

Anyway, to set this up you'll need a div to append the dropdown menu and a set of stock names. You can use this list of stock names to create the dropdown menu as shown below.

变量名称= ["AAPL"，"YHOO"，"FB"，"MSFT"]；

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参数，并且一旦从Yahoo接收到json，就需要调用draw函数.因此，从您的代码中借用这样的东西应该可以工作:

Of course you need to setup the change function, which needs to wrap up all the variables required to do the call to Yahoo. Obviously, you'll need to pass in the stock parameter and once you've received the json back from Yahoo you'll need to call your draw function. So borrowing from your code something like this should work:

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

}

您必须在加载时调用draw函数，否则最终将出现空白屏幕，并且还需要从一个数据集过渡到另一个数据集.

You'd have to call the draw function on load otherwise you'll end up with a blank screen and also sort out transitioning from one data set to the next.

这篇关于下拉菜单值更改时重新加载d3图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！