javascript - 更新页面 JSON 数据获取下拉更改

Question

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

在呈现给用户的页面上有一个简单的下拉菜单，可让用户决定要显示哪一年的数据。在初始页面加载时效果很好，下拉菜单中的默认值会传递到“yearchoice”变量，该变量又会传递到 JSON 请求。然而，此时的问题是，当用户从下拉列表中选择另一年时，什么也没有发生。我认为的原因是我必须添加一些“onSelect”或“onClick”代码来强制拉取新数据并刷新可视化。然而到目前为止我还没有解决这个问题。请参阅下面的相关(简化)代码:

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

并将图表的整个渲染放入一个函数(更新图例)中，该函数在每次下拉列表更改值时运行。