通过下拉框为某些可视化指定json文件

Question

我最近开始尝试使用d3.js进行可视化。我不具备JS或网页脚本的大部分背景，很抱歉，如果这是我要问的简单事情。

确切的例子并不重要。我正在制作图表，例如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元素（d3.js中为change）上为.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