d3.js drawing network with immobilizing layouts

If you add a function like function(d){ d.fixed = true } and have that called on each node during a tick (or maybe just during the first tick) then you will have a static graph. Otherwise you could call force.stop() after your code runs (or likewise during the first tick) and it will accomplish the same.

The problem I encountered was that calling force.stop() at the end of my code block caused the graph to freeze before it had properly settled in the center of the SVG, and since I wasn't concerned about a static graph I made a 'mousedown' event function that made a node fixed when it was moved to a location.

You can look at the static for directed visualization http://bl.ocks.org/mbostock/1667139

Basically, you create a force layout, assign nodes and links to it and then start it.

Then you run the force.tick() method ticks number of times. This will calculate the positions of each node in the layout. You will have to experiment with the value of ticks for getting a good graph. This value should be increased in proportion to the number of nodes in your graph.

force = d3.layout.force();ticks=2000;  //number of ticks for calculating the force layoutforce    .nodes(nodes)  //nodes = array of nodes    .links(links)  //links = array of links    .start();for (var i = ticks; i > 0; --i) force.tick();force.stop();

You have to do this before your above code starts.

Now you have the force object which you can use to position your nodes and links.Assign the attributes to node and link variables directly now.(Previously being done inside the tick function)

Your code will look like this now.

node.append("circle")    .attr("cx", function(d){return d.group*70; })    .attr("cy", function(d){return d.index*10;})    .attr("r", 10)    .attr("fill",function(d){        return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")"    })    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });node.append("text")    .attr("dx", function(d){return d.group*70;})    .attr("dy", function(d){return d.index*10;})    .text(function(d) { return d.name });link.attr("x1", function(d) { return d.source.x; })    .attr("y1", function(d) { return d.source.y; })    .attr("x2", function(d) { return d.target.x; })    .attr("y2", function(d) { return d.target.y; });