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

时间:2015-11-18 12:59:20

标签: javascript jquery json d3.js

我有一个数据集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);

1 个答案:

答案 0 :(得分:1)

这是一个有效的example

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

看起来你根本不需要d3.nest(如果你想要的只是获取特定密钥的值)