包布局中的叶节点不同 shape/image

Question

我在 d3.js (https://github.com/mbostock/d3/wiki/Pack-Layout) 中使用包布局并加载到具有 parent-child 结构的 json 文件中。

我的问题可能是一个非常微不足道的问题：我想根据 d.children returns parent 还是 child（其中 child 基本上是叶节点）。

这是一段将圆圈附加到所有节点的代码：

 vis.selectAll("circle")
  .data(nodes)
.enter().append("svg:circle")
  .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return d.r; });

有人有什么建议吗？谢谢，

Answer 1

使用过滤函数：

// if you have children, append a circle
node.filter(function(d){
  return d.children;
})
.append("circle")
.attr("r", function(d) { return d.r; });

// if you don't have children, append a rect
node.filter(function(d){
  return !d.children;
})
.append("rect")
.attr("width", function(d) { return d.r; })
.attr("height", function(d) { return d.r; })
.attr("x", function(d) { return -d.r/2; })
.attr("y", function(d) { return -d.r/2; });

例子here.

包布局中的叶节点不同 shape/image

Different shape/image for leaf nodes in pack layout

d3.js