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

Share Improve this question Follow edited Jun 3, 2014 at 11:31 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Oct 14, 2012 at 11:30 user1159833user1159833 7711 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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