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

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。