我有一个数据集Can be viewed here和一个带国家/地区名称的下拉菜单(数据集中的关键属性)。现在,如果我从下拉菜单中选择一个国家/地区,我如何在更改时对数据集进行子集化,以仅显示所选国家/地区的值。我现在的代码只输出[object Object]
代码:
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);
答案 0 :(得分:1)
这是一个有效的example
您的uniqueData
是包含整个数据的对象。您想要的是获取所选索引(所选国家/地区)的值。要在控制台中查看值,请展开消息。
看起来你根本不需要d3.nest
(如果你想要的只是获取特定密钥的值)