这次我试图创建一个带有可切换系列的堆叠条 - 基于 Mike Bostock 的示例(再次感谢 Mike!)我已经成功地使其具有响应性和可缩放性,并且通过图例的可切换系列是剩下的最后一件事。
我创建了图例项,并使用键应用了正确的颜色:
var legendItem = d3.select(".legend")
.selectAll("li")
.data(keys)
.enter()
.append("li")
.on('click', function(d) {
keys.forEach(function(c) {
if (c != d) tKeys.push(c)
});
fKeys = tKeys;
tKeys = [];
redraw();
});
legendItem
.append("span")
.attr("class", "color-square")
.style("color", function(d) {
return colorScale5(d);
});
legendItem
.append("span")
.text(function(d) {
return (d)
});
基于结构,为了创建可切换项目,我得出的结论是,我必须能够以某种方式从键和数据集切换它 - 还是有其他方法可以做到这一点?我已经设法从键中删除了一个特定的键,但不是从数据集中,我不知道如何正确映射它。
第二个问题是我想不出一种切换键的方法,而只是将其删除。这是原始数据集:
var data = [{
"country": "Greece",
"Vodafone": 57,
"Wind": 12,
"Cosmote": 20
}, {
"country": "Italy",
"Vodafone": 40,
"Wind": 24,
"Cosmote": 35
}, {
"country": "France",
"Vodafone": 22,
"Wind": 9,
"Cosmote": 9
}]
在从嵌套数据集中提供的值中,我可以为每个对象附加一个名为“启用”的键,并且可以轻松过滤数据集,但无法弄清楚如何附加一个键以帮助过滤过程。
edit3从问题中删除了无用的信息:
这是一个工作小提琴: https ://jsfiddle.net/fgseaxoy/2/