D3：树形图，图像和圆圈作为节点

Question

我正在尝试重现"tree diagram with images as nodes" 。

然而，我不是让所有节点都有图像，而是希望有一些带有图像的节点和带有常规圆的其他节点。

有什么想法吗？

我需要在代码的这一部分进行更改：

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版本：

link to 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");

就是这样！

link to jsfiddle