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

我试图重现"tree diagram with images as nodes"。D3：以图像和圆圈为节点的树形图

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

任何想法？

有什么事情，我需要在这部分代码修改：

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

来源

2014-05-05 lizzie

的一种方式。也就是说，你过滤你的选择只有你想要的元素循环并为这些元素添加圆圈。类似于具有图像的节点。 –

另一种方法是制作节点''元素，然后根据数据添加图像或圆形到组。 – AmeliaBR

肯定有几个显著不同的方式来实现你想要的。但是，我将向您展示一种既简单又符合d3图书馆精神的方式。

为了方便，我准备你提到的例子中的jsfiddle版本：

link to jsfiddle

enter image description here

（因为我无法弄清楚从例如路径图标，我使用了一些我在互联网上找到的，我用它们的完整的互联网地址）

现在，让我们在这个代码更改两个这样的网络图标路径的空字符串（指示圈应显示，而不是图标），如：

{ 
    "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

这样做会怎样对待你想圈和图像分开节点

enter image description here

来源

2014-05-05 21:13:09 VividD

谢谢@VividD！它非常完美！ – lizzie

嗨VividD，我们希望使用d3js分层树来表示拓扑。我们正在寻找的特点是：1。 \t点对点连接 2. \t儿童与2位家长 3.表示为一条直线，而不是默认的曲线在两个物体之间\t链接。 – Abhij

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

回答

相关问题