d3.js - 通过下拉框指定用于某些可视化的 json 文件

Question

我最近开始尝试使用 d3.js 进行可视化。我在 JS 或 Web 脚本方面没有太多背景，所以很抱歉，如果我问的是一件简单的事情。

具体的例子并不重要。我正在制作一个图表，例如 this

我希望页面上有一个下拉菜单，列出不同的数据源。然后，用户可以选择数据源，图表就会更新。

我使用示例 here 创建了一个下拉菜单。但是，我不确定如何获取该值，因为我需要该行

d3.json("miserables.json", function(json) {

使用新名称进行更新。

Answer 1

你的 html 文件应该是这样的......

<select id="json_sources" name="json_sources">
    <option value ="source1.json" selected>Source 1</option>
    <option value ="source2.json">Source 2</option>
    <option value ="source3.json">Source 3</option>
</select>​

然后，为 select 元素上的 change 事件添加一个事件监听器(d3.js 中的 .on):

var dropdown = d3.select("#json_sources")
var change = function() {
  var source = dropdown.node().options[dropdown.node().selectedIndex].value;
  d3.json(source, function(json) {
     //continue doing stuff here.
  })
}

dropdown.on("change", change)
change(); //trigger json on load