使用D3.JS为Nest树图着色

Question

我正在从csv文件创建一个Treemap。 csv文件中的数据是分层的，看起来像我从另一个Stack Overflow问题中偷走的这个例子

parent,child,value
Homer Simpson,Bart,20
Homer Simpson,Lisa,14
Homer Simpson,Maggie,6
Peter Griffin,Chris,19
Peter Griffin,Meg,12
Peter Griffin,Stewie,9

我正在使用d3.nest（），因为我不想像so那样重新格式化我的CSV。我的大部分文件都是从Mike Bostock的Nest Treemap here中偷走的，但是我无法弄清楚如何以不同的方式给父母上色，而且我对Javascript和D3都很陌生。 。这是我正在使用

的脚本

<script>

var format = d3.format(",d"),
    color = d3.scaleOrdinal(d3.schemeCategory10);

var nest = d3.nest()
    .key(function(d) {return d.parent;})
    .key(function(d) {return d.child;})
    .rollup(function(d) {return d3.sum(d, function(d) {return d.value;}); });

var treemap = d3.treemap()
    .size([960, 960])
    .round(true)
    .padding(1);

d3.csv("d3.csv", function(error, data) {
    if (error) throw error;

    data.forEach(function(d) {
        if (d.parent == "null") { d.parent = null};
    });

    var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
        .sum(function(d) { return d.value; })
        .sort(function(a, b) { return b.value - a.value; });

    treemap(root);

    var node = d3.select("body")
        .selectAll(".node")
        .data(root.leaves())
        .enter().append("div")
        .attr("class", "node")
        .style("left", function(d) { return d.x0 + "px"; })
        .style("top", function(d) { return d.y0 + "px"; })
        .style("width", function(d) { return d.x1 - d.x0 + "px"; })
        .style("height", function(d) { return d.y1 - d.y0 + "px"; })
        .style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); })

    node.append("div")
        .attr("class", "node-label")
        .text(function(d) { return d.parent.data.key + "\n" + d.data.key; });

    node.append("div")
        .attr("class", "node-value")
        .text(function(d) { return format(d.value); });
});

</script>

如何为不同的块着色？我坚持实施背景风格，并且不理解为什么所有父母看起来都有相同的颜色。我相信让父母纠正也会帮助我实现缩放。任何帮助，将不胜感激。谢谢！

Answer 1

因为没有属性d.id（用于设置填充），所以返回undefined，并且所有元素的颜色与序数标度相同。

要在此处获取父标识符，我们需要查看包含另一个对象的d.data属性：

{ 
   key: "Homer Simpson",
   values: [children]
}

如果您想根据父母为孩子上色，请使用d.data.key：

.style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.data.key); })