Question

我目前遇到以下问题：我用d3.js创建了一个简单的可视化。可视化的数据通过JSON / PHP从MySQL服务器中提取。

在提供给用户的页面上有一个简单的下拉菜单，让用户可以决定他们想要显示哪一年的数据。在初始页面加载工作正常，下拉菜单中的默认值传递给＆＃34; yearchoice＆＃34;变量，反过来又传递给JSON请求。然而，此时的问题是，当用户从下拉列表中选择另一年时，没有任何事情发生。我假设的原因是我必须添加一些＆＃34; onSelect＆＃34;或者＆＃34; onClick＆＃34;用于强制新数据拉取和刷新可视化的代码。然而到目前为止，我没有运气解决这个问题。请参阅下面的相关（简化）代码：

HTML

<select id="DropDownList">
 <option value="2014">2014</option>
 <option value="2015">2015</option>
</select>

d3.js

//select year
var yearchoice = d3.select("#DropDownList").node().value;

// Get the data
d3.json("allspending.php?year=" + yearchoice, function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.amount = +d.amount;
    });

Answer 1

好的想出来。

使用以下内容监控下拉列表中的更改。

d3.select('#DropDownList')
  .on('change', function() {
    var yearchoice = eval(d3.select(this).property('value'));
    updateLegend(yearchoice);
});

并将图形的整个渲染放在一个函数（更新图例）中，每次下拉列表更改值时都会运行该函数。

更新页面JSON数据继续下拉更改

1 个答案: