javascript - D3 : Tree diagram with images and circles as nodes

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