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

Question

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

确切的例子并不重要。我正在制作一个图表，像这样

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

我使用此处的示例创建了一个下拉菜单。但是，我不确定如何获得价值，因为我需要这条线

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>​

change然后为select 元素上的事件添加一个事件侦听器（.on在 d3.js 中）：

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