包布局中叶节点的不同形状/图像

Question

我在d3.js（https://github.com/mbostock/d3/wiki/Pack-Layout）中使用包布局并加载带有父子结构的json文件。

我的问题可能是一个非常微不足道的问题：我想附加一个圆圈或图像（或者一个矩形），具体取决于d.children是返回parent还是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。