D3：以图像和圆圈为节点的树形图答案

【问题标题】：D3: Tree diagram with images and circles as nodesD3：以图像和圆圈为节点的树形图
【发布时间】：2014-06-22 06:20:59
【问题描述】：

我正在尝试重现 "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");

【问题讨论】：

一种方法是分别处理您想要圆圈和图像的节点。也就是说，您过滤您的选择以仅包含您想要圈子的元素并为这些元素附加圈子。带有图像的节点也类似。
另一种方法是制作节点<g>元素，然后根据数据在组中添加图像或圆圈。

标签： javascript image svg d3.js tree

【解决方案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

【讨论】：

嗨 VividD，我们想使用 d3js 层次树来表示拓扑。我们正在寻找的功能是： 1. 点对点链接 2. 有 2 个父母的孩子 3. 两个对象之间的链接表示为直线而不是默认曲线。