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

Question

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

确切的例子并不重要.我正在制作一个图形,就像这样

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

我在这里使用示例创建了一个下拉菜单.但是,我不确定如何获得该值,因为我需要该行

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