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（如果你想要的只是获取特定密钥的值）

如何根据下拉列表中的更改使用d3.js对数据集进行子集化

1 个答案: