how to display the node attributes like person's name photo and address in a force directed graph

Question

Hi I am working on a force directed graph example of d3.js library but i want to fix the positions of all nodes. And When i click on the node I want to display a pop up which shows image and some info of user(node).

Answer 1

I'm going to do my best to answer, but there is a lot to cover in your question, so this is more of an overview of where to look for more info, and a bit to get you started down the right path.

Please excuse the shoddy links ( I can't post more than two yet...)

Nodes can be fixed position by setting the boolean "fixed" property of each individual node to true.

See Sections on: # force.nodes([nodes]) https://github.com/mbostock/d3/wiki/Force-Layout

To make nodes clickable, you could attach an event listener to the node selection as you are appending new nodes to the node selection. See here: Github /mbostock/d3/wiki/Selections#wiki-on

To add more properties to each node, simply add that data to your objects inside the "node" array before joining it to your selection.

Here is a edit to it that I made to show how you can add a drag behavior, and a mouse "click" listener event to toggle nodes between fixed=true and false, with some comments on where you would add additional node properties, and possibly make function calls to display more node info. https://gist.github.com/alexhornbake/6079321

The above was edited from the following example. I still refer back to this example when I get confused, very helpful/simple Force Layout Example: Gist GitHub /mbostock/1095795

Answer 2

To add to Alex's answer, here's a simple example, assuming you've associated a property name with each data value. So you'll want to have a g element for every node, and each g would have both a circle and a text. You can then relate the two through indices or values as Mike Bostock explains here. Note the data is automatically inherited from the parent. Use the associated on click event to add or remove a class to the text that will show or hide it. This can be done using selection.classed()

var nodes = d3.select("body").append("svg:g")
                     .selectAll("g.nodeGroup")
                     .data(dataset)
                     .enter()
                     .attr("class", "nodeGroup")
                     .attr("x", function(d) { ...
                          ...
                     .each(function(d) { 
                            d3.select(this).append("circle")
                                    .attr("r", function(p) { return p.value})
                                    .on("click", function(p) {
                                         d3.selectAll("g.nodeGroup text")
                                            .filter(q) { return p.value == q.value}
                                            .classed("show", true)});
                            d3.select(this).append("text")
                                     .attr("text", function (P) { return p.name})
                   });