Question

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

下拉：

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) {范围内，因为我从数据集中提取了下拉值。

Answer 1

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

为每个元素添加一个事件

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

Answer 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});，但出于某种原因，这种情况无法奏效。它会让我加载每个选项一次，但如果我尝试回到之前的选择，就不会看到数据文件。

D3：参考下拉菜单选择

2 个答案: