D3 将不同的数据连接到 2 下拉菜单答案

【问题标题】：D3 Connecting different data to 2 drop down menuD3 将不同的数据连接到 2 下拉菜单
【发布时间】：2016-03-25 21:34:16
【问题描述】：

我有一个 .js 文件创建的散点图，其中包含有关 GNI 和道路交通死亡率的信息。我的问题是，如何创建两个不同的下拉菜单？ y 轴目标现在是不同道路使用者类别的下拉列表。但同样的下拉菜单也适用于各大洲。我知道我应该使用

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

但我不知道如何以及在哪里将它连接到我创建的大陆下拉目标而不覆盖 y 轴目标（目前正在做它应该做的事情。）

我只希望 y 轴和大洲目标显示其适当的选择。

这是我的代码：

function createButtons() {
// this array will be the list of dropdown menus
// each element will have a name and the target measure it will change

var buttonsData = [
    {name:"y axis", target: "y"},
    {name:"continents", target: "continents"}
];

var buttonGroups = d3.select("#buttons").selectAll(".buttonGroup")
    .data(buttonsData).enter()
    .append("span").attr("class", "buttonGroup");


// add a label to each <span> and set the text to be the name of the dropdown 
// this name is defined in the array above
buttonGroups.append("label").html(function(d){return d.name;});


// add a <select> dropdown tag to the <span> tag
buttonGroups.append("select")
    // when the dropdown selection changes, this event handler is called
    .on("change", function(d) {
        // find the index of the selection
        var selectedIndex = d3.select(this).property('selectedIndex');
        // here is where the target comes into play.

        if (d.target == "y") {
            yAxisIndex = selectedIndex;
        }

        else if (d.target == "continents") {
            continentIndex = selectedIndex;

            /*if ((sizeIndex >= 0) && (sizeIndex <=25)) {
                countries = countries.slice(0, 25);
                updateVis(false);
            }*/

        }

        // and update the vis, this will change the scales, labels, and reposition/resize the circles
        //creates the animation
        updateVis(true);
    })

    // add options to each <select> tag.
    // these options are coming from the countries array and are bound the same way as above
        .selectAll("option")
        .data(headers).enter()
        .append("option")
        //set the text of each option to the data elements from headers array
        .text(function(d) { return d; });

}

【问题讨论】：

标签： javascript d3.js drop-down-menu scatter-plot

【解决方案1】：

将数据添加到您的buttonsData

var buttonsData = [
    {name:"y axis", target: "y", optionData: ["france", "germany", "australia"]},
    {name:"continents", target: "continents", optionData: ["europe", "oceania"]}
];

（如果这些数组已经在代码中某处浮动，则可以添加 optionData ，如下所示：optionData: countries 和 optionData: continents）

然后您可以访问它来创建选项列表，如下所示：

 .selectAll("option")
        .data(function(d) { return d.optionData; })

http://jsfiddle.net/f2c526ho/

【讨论】：