javascript - 如何根据下拉列表的变化使用 d3.js 对数据集进行子集化

Question

我有一个数据集Can be viewed here以及一个包含国家/地区名称的下拉菜单(数据集中的关键属性)。现在，如果我从下拉菜单中选择一个国家/地区，如何在更改时对数据集进行子集化以仅显示所选国家/地区的值。我现在拥有的代码仅输出 [object Object]

fiddle here

代码:

function checkIt(data) {

    var countriesByName = d3.nest()
        .key(function (d) {
        return d.Country_Names;
    })
        .entries(data);
// creating dropdown    
    var data = JSON.stringify(countriesByName)
    var data = JSON.parse(data);
    var dropDown = d3.select("#dropdown_container")
                   .append("select")
                   .attr("class", "selection")
                    .attr("name", "country-list");

    var options = dropDown.selectAll("option")
                  .data(data)
                  .enter()
                  .append("option");
         options.text(function (d) { return d.key; })
       .attr("value", function (d) { return d.key; });

// detecting change in drop down
var changePie = function() {
    //get the data value and index from the event
    var selectedValue = d3.event.target.value;
    var selectedIndex = d3.event.target.selectedIndex;

    //alert("You selected the option at index " + selectedIndex + ", with value attribute "+ selectedValue);

    var selectedDOMElement =
        d3.event.target.children[selectedIndex];
    var selection = d3.select(selectedDOMElement);

// subsetting data    
var uniqueData = d3.nest()
    .key(function(selection) { return selection.key; })
    .entries(data)
    .map(function(entry) { return entry.values[0]; });

//Output selected country with all its values
    console.log ("your selection is" + uniqueData)

    //making Pie 
function makePie() {
return ("you have made a Pie for" + " " + selection.text())
};
    alert(makePie());
};   

d3.select("#dropdown_container").on("change", changePie);           
};



d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json", checkIt);

Answer 1

这是一个工作 example

您的uniqueData是一个包含整个数据的对象。您想要的是获取所选索引(所选国家/地区)的值。要查看控制台中的值，请展开消息。

您似乎根本不需要d3.nest(如果您想要的只是获取特定键的值)