D3：以图像和圆圈为节点的树状图

Question

我正在尝试重现“以图像为节点的树状图”。

但是，我不想让所有节点都带有图像，而是想让一些节点带有图像，而其他节点带有常规圆圈。

有任何想法吗？

在这部分代码中是否需要更改：

nodeEnter.append("image")
  .attr("xlink:href", function(d) { return d.icon; })
  .attr("x", "-12px")
  .attr("y", "-12px")
  .attr("width", "24px")
  .attr("height", "24px");    

Answer 1

肯定有几种截然不同的方法来实现你想要的。但是，我将向您展示一种既简单又符合 d3 库精神的方法。

为方便起见，我准备了您提到的示例的 jsfiddle 版本：

链接到 jsfiddle

（因为我无法从示例中找出图标的路径，所以我使用了一些我在互联网上找到的，并为它们使用了完整的互联网地址）

现在，让我们将两个这样的互联网图标路径更改为空字符串（表示应该显示圆圈而不是图标），就像下面的代码：

  {
    "name": "Son of A",
    "parent": "Level 2: A",
    "value": 5,
    "type": "steelblue",
    "icon": "",
    "level": "orange"
  },

我们必须找到只为图标选择包含空字符串的节点的方法，并为它们添加圆圈。这是通过以下代码完成的：

  nodeEnter.filter(function(d) {
            return (d.icon == "");
       })
      .append("circle")
      .attr("cx", "0px")
      .attr("cy", "0px")
      .attr("r", "12px");

就是这样！

链接到 jsfiddle