I am new to D3JS, I need to create force layout with both image or circle for each node. that means, A Image node or Circle node be added dynamically. Is this possible?, if any examples please answer

I am new to D3JS, I need to create force layout with both image or circle for each node. that means, A Image node or Circle node be added dynamically. Is this possible?, if any examples please answer

• javascript
• svg
• d3.js
• force-layout

2 Answers 2

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
    .enter().append("svg:g")
    .call(node_drag);

/* append circle to node */
node.append("svg:circle")
    .attr("cursor","pointer")
    .style("fill","#c6dbef")
    .attr("r", "10px"})

/* append image to node */
node.append("image")
    .attr("xlink:href", "https://github./favicon.ico")
    .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)

    groups.append("circle")
       .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

groups.append("image")
       .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 :

groups.append("text")
        .attr("dy", 18)
        .style("font-size", "2.5px")
        .style("text-anchor", "middle")
        .style('fill','#000')
        .attr("refX", 15)
        .attr("refY", -1.5)
        .text(function (d) {
            return d.entityName;
        });