在D3分区布局示例中选择叶节点并应用不同的填充颜色的正确方法是什么？

Question

I am using the Zoomable Icicle layout in D3 to visualise a folder hierarchy found here: http://bl.ocks.org/mbostock/1005873 .

At the moment, to fill leaf nodes with a different color I edit the fill of rect:

rect.data(data)
        .enter()
        .append("rect")
        .attr("x", function (d) { return x(d.x); })
        .attr("y", function (d) { return y(d.y); })
        .attr("width", function (d) { return x(d.dx); })
        .attr("height", function (d) { return y(d.dy); })
        .attr("fill", function (d) { return d.children ? /* parent color */ : /* leaf color */; })
.on("click", clicked);

Is this the most correct way to do it?

How can I use a selector to select leaf nodes and apply a different fill color to rect based on the example code?

Thanks!

Answer 1

Yes, this is the correct way to do it -- the only thing that differentiates leaf from non-leaf nodes is whether the children property is null or not.

To select leaf nodes, you can use .selectAll() in conjunction with .filter() :

var leaves = d3.selectAll("rect").filter(function(d) {
  return d.children === null;
});