在节点和链接的典型图中将附加到节点的图像的文本标题转换为D3中的图像

Question

我想将标题添加到d3中的节点。 但是，我不想将其附加为文本，而是希望将其附加为图像，以便在图形方案中所有行都位于标题下方，图片看起来更清晰。

目前由于许多链接，图片看起来很乱，我想避免。

node.append('text')
.attr("class","label")
.attr("style","font-size:12px;")
.html(function(d){ 
        return d.name;  
    }
})
.attr("x",0)
.attr("y",-radius);

有什么办法可以做到这一点。 我读过有关隐藏的画布的信息，但由于我是D3的初学者，因此不确定确切的用法。

谢谢

Answer 1

您也可以附加图像 。

我在这里设置了一个小提琴 ，以演示在圆内附加图像（图标）的工作示例。

node.append("circle")
         .attr("cursor","pointer")
          .attr("cx", 200)
         .attr("cy", 200)
         .attr("r", 25)
         .style("fill","white")
         .style("stroke", "black")     
         .style("stroke-width", 2);

node.append("image")
    .attr("xlink:href", "http://i.stack.imgur.com/bZXWH.png")
    .attr("x", 185)
    .attr("y", 185)
    .attr("width", 32)
    .attr("height", 32);

您可能还会发现本教程很有帮助。