Question

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

Answer 1

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.com/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.