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

Question

I would like to add header to my nodes in d3. But instead of appending it as text I want to append it as image so that in graph scenario all lines will be below header and picture will look cleaner.

Currently because of many links picture looks messy which I want to avoid.

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

Is there any way how to do this. I read about hidden canvas but not sure exactly how to use here as I am beginner in D3.

Thanks

Answer 1

You can append an image as well.

I've set up a fiddle here, to showcase a working example of appending an image(icon) inside a circle.

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);

You might also find this tutorial helpful.