Question

我正在尝试构建一组下拉列表，以便仅使用用户想要的数据填充图表。我设法使用一个下拉列表，它访问我从原始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！）但是我无法访问所需数据的正确值，现在nested数据集已经过结构化像这样： enter image description here

每个Objec t（d.FamilyName）都有一系列对象（按d.Stylename排序）和其他数据。我通过以下方式访问了控制台中的一个：

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

返回第一个数组的第一个值，但是我想在第二个下拉列表中包含所选数组中包含的每个StyleName，例如first dropdown如果我选择{{1} } {font}，在Times中它返回second，但我不知道如何调用它。任何帮助真的很感激！谢谢！

Answer 1

好的，经过一天的努力，我就这样做了：

  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完成。也许这可以通过更简单，更紧凑的方式完成，但是像这样，它工作起来有点容易理解

Answer 2

你有两个选择。

运行所有依赖于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

Answer 3

你快到了！您可以使用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 });
});

https://github.com/1wheel/film-strips/blob/master/wrapper.js

D3.js~根据数据集下拉依赖列表

3 个答案: