在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;
});