Accepted answer

Well if you just want to have an image in the middle of the circle try this:

/* Create nodes */
var node = vis.selectAll("g.node")
    .data(json.nodes) // get the data how you want

/* append circle to node */
    .attr("r", "10px"})

/* append image to node */
    .attr("xlink:href", "")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

You can also append a title, some text... See the documentation of selection.append(name) for more info.


For Dynamic Image, you can keep the image in local and using image name you can use the dynamic image from the local.

For making circle, you can use :

 var groups = node.enter().append("g")
        .attr("class", "node")
        .attr("id", function (d) {
            return d.entityType;
        .on('click', click)

       .attr("cursor", "pointer")
       .style("fill", function(d) { return color(d.entityType); })
       .style("fill", "#fff")
       .style("stroke-width", "0")
       .style("stroke", "#ddd")
     .attr("r", 20);

Here, d.entityType will be the name of the image example : favicon.png

       .attr("xlink:href",function (d) {
            return "../assets/images/"+d.entityType+".png";
        .attr("x", -14)
        .attr("y", -15)
        .attr("width", 30)
        .attr("height", 30)

If you want to add text inside the circle, you can use :

        .attr("dy", 18)
        .style("font-size", "2.5px")
        .style("text-anchor", "middle")
        .attr("refX", 15)
        .attr("refY", -1.5)
        .text(function (d) {
            return d.entityName;

Related Query

More Query from same tag