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

Question

我正在D3中使用Zoomable Icicle布局来可视化此处找到的文件夹层次结构： http ://bl.ocks.org/mbostock/1005873。

此刻，为了用不同的颜色填充叶节点，我编辑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);

这是最正确的方法吗？

如何使用选择器选择叶节点并根据示例代码将其他填充颜色应用于rect？

谢谢！

Answer 1

是的，这是正确的方法-区分叶子节点和非叶子节点的唯一一件事是children属性是否为null 。

要选择叶节点，可以将.selectAll()与.filter()结合使用：

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