Javascript D3.js~具有基于数据集的依赖关系的下拉列表

我试图构建一组下拉列表，以便仅用用户需要的数据填充图形。我设法用一个下拉列表让它工作，该列表访问我从原始csv设置的嵌套数据。我现在想做的是访问第一个下拉列表中的选定值并显示变量，但我不确定如何使用js或d3.js获取选定值（如果可能，我很乐意避免使用其他东西）。到目前为止，我得到的是：
编辑：稍微更改了代码，如下所示：

d3.select("#elenco")
    .append("select")
    .append("option")
    .attr("value", "---")
    .text("---");
d3.select("#elenco")
    .select("select")
    .on("change", function (d) {
        var questo = this.value;
        sel = this.options[this.selectedIndex].value;
        circle.filter(function () { return this.id == questo; }).attr("r", 5);
        circle.filter(function () { return this.id != questo; }).attr("r", 1); 
        if (this.value == "---") { return circle.attr("r", 2); };

        d3.select("#elenco2")
            .select("select")
            .on("change", function (d) { null })
            .selectAll("option")
            .data(nested.filter(function () { return nested.key == sel })) 
            .enter()
            .append("option")
            .attr("value", function (d){ return d.StyleName; })
            .text(function (d){ return d.StyleName; })
    })
    .selectAll("option")
    .data(nested)
    .enter()
    .append("option")
    .attr("value", function (d){ return d.key; })
    .text(function (d){ return d.key; });

d3.select("#elenco2")
    .append("select")
    .append("option")
    .attr("value", "---")
    .text("---");

现在，我可以通过设置全局变量

sel

（谢谢Lars！）来访问所选值，但我在访问所需数据的正确值时遇到困难，现在

嵌套的

数据集的结构如下：

每个

Objec

t（

d.FamilyName

）都有一系列对象（按

d.Stylename

排序）和其他数据。我通过以下方式访问了控制台中的其中一个：

console.log(nested[0].values[0].StyleName)

它返回第一个数组的第一个值，但我想在第二个下拉列表中获取所选数组中包含的每个样式名，例如在

第一个下拉列表中

如果我选择

倍

字体，在

第二个

中，它返回

粗体、常规、轻量级

，但我不知道怎么称呼它。 非常感谢您的帮助！谢谢

你有两个选择

• 在

  change

  处理程序中运行依赖于所选值的所有代码
• 声明在

  change

  处理程序中设置的全局变量。您仍然需要调用进行更改的函数，因为只有处理程序知道何时发生更改

然后，要根据第一个下拉列表中的值为第二个下拉列表选择值，您需要类似这样的代码

var choices;
for(key in nested) {
  if(key == sel) {
    choices = nested[key].values.map(function(d) { return d.StyleName; });
  }
}
// do something interesting with choices

---

你快到了！您可以使用

this.selectedIndex

获取当前所选索引的索引：

d3.json('movies.json', function(movieArray){
  d3.select("#selectNumber")
      .on("change", function(){
        updateMovie(this.options[this.selectedIndex].value);})
    .selectAll("option").data(movieArray).enter().append("option")
      .text(function(d){ return d.replace(/_/g, " ") })
      .attr("value", function(d){ return d });
});

---

好的，在一天的工作之后，我让它像这样工作：

  d3.select("#elenco")
    .append("select")
    .append("option")
    .attr("value", "---")
    .text("---");
  d3.select("#elenco")
    .select("select")
    .on("change", function (d) {
        var questo = this.value;
        var questoindex = this.selectedIndex;
        var circlefilter = circle.filter(function () { return this.id == questo; }).attr("r", 5);
        circle.filter(function () { return this.id != questo; }).attr("r", 1); 
        if (this.value == "---") { return circle.attr("r", 2); };
        d3.select("#elenco2").select("select").selectAll("option").remove(); //this removes the previous options from previous selections in the first drop down

        d3.select("#elenco2")
            .select("select")
            .append("option")
            .attr("value", "---")
            .text("---");
        d3.select("#elenco2")
            .select("select")
            .selectAll("option")
            .data(nested[questoindex].values)
            .enter()
            .append("option")
            .attr("value", function (d){ return d.StyleName; })
            .text(function (d){ return d.StyleName; });
        d3.select("#elenco2")
            .select("select")
            .on("change", function (d) {
                var quello = this.value;
                circlefilter.filter(function (d) { return d.StyleName == quello; }).attr("r", 5);
                circlefilter.filter(function (d) { return d.StyleName != quello; }).attr("r", 3); 
                if (this.value == "---") { return circlefilter.attr("r", 5); }
            });
        })
    .selectAll("option")
    .data(nested)
    .enter()
    .append("option")
    .attr("value", function (d){ return d.key; })
    .text(function (d){ return d.key; });

d3.select("#elenco2")
    .append("select")
    .append("option")
    .attr("value", "---")
    .text("---");

---

我必须诚实地说，这需要很多努力和运气，才能让一切正常工作，但是现在依赖下拉列表可以工作了，而且大部分工作都是用d3和一些基本javascript完成的。也许这可以用一种更简单、更紧凑的方式来完成，但像这样，它可以工作，并且有点容易理解

我的问题是，如果我在变量中设置所选id，比如var selected=this.id，我如何在其他下拉菜单中访问它？我猜数据集是基于该值过滤的，但我的问题是如何在on change函数之外访问该数据集？将其设置为全局变量（即在处理程序之外声明）并将其设置在处理程序中。但是，第二个下拉项的创建也应该放在第一个下拉项上，对吗？如果第二个下拉项中的值取决于第一个下拉项中的选择，则是。看起来我还需要一些帮助，稍后我会补充更多关于这个问题的信息。嘿，首先谢谢你的回答和欢呼但看起来我的问题与我在第一个答案中所说的有点不同，我对它进行了一些编辑