D3：参考下拉菜单选择答案

【问题标题】：D3: Referencing Drop Down Menu SelectionD3：参考下拉菜单选择
【发布时间】：2014-08-27 21:18:19
【问题描述】：

我目前有一个下拉菜单，并希望我的图表使用基于下拉选择的数据。我不确定如何设置我的更改功能（我认为这是解决方案，如果我错了请纠正我）。

下拉菜单：

var menu = d3.select("#projection-menu")
.on("change", change);

menu.selectall("option")
  .data(options)
 .enter().append("option")
  .text(function(d) {return d;});

function change() {
// what do i put here?;
}

然后我想根据该选择更改我的数据

data = _.where(data, {category: drop-down-selection});

我一直在环顾四周并尝试了类似的方法：

function change() {
 var drop-down-selection = d3.select("#projection-menu").node().value;
}

可惜没用

谢谢！干杯

哦，这都在d3.csv("test.csv", function(data) { 内，因为我从数据集中拉出下拉值。

【问题讨论】：

标签： javascript forms drop-down-menu d3.js

【解决方案1】：

如果下拉列表中的每个元素都有一个 id，您可以使用

为每个元素添加一个事件

document.getElementById("item-id-name").addEventListener("click",function(){
//do some stuff
},false);

【讨论】：

【解决方案2】：

所以我不确定这是否是最好的方法，但我最终得到了：

d3.csv("test7.csv", function(data1) {

//Dropdown Menu
var a = ["Select one"];

data1.forEach(function(d) {
a.push(d.risk)
});

var arrayUnique = _.uniq(a);

var options = arrayUnique;

var menu = d3.select("#projection-menu")
.on("change", change);

menu.selectAll("option")
  .data(options)
.enter().append("option")
  .text(function(d) { return d;});

然后在更改函数并使用_.where之后再次调用相同的csv

function change() {
d3.csv("test7.csv", function(data2){
var sel = d3.select("#projection-menu").property("value");
d3.selectAll("div").remove();
var data = _.where(data2, {risk: sel});

我最初只是尝试使用var data = _.where(data1, {risk: sel});，但由于某种原因不起作用。它可以让我加载每个选项一次，但如果我尝试返回之前的选择，则不会看到数据文件。

【讨论】：