D3 force layout fix root node at the center

d3.js force-layout
Alfred picture Alfred · Feb 18, 2014 · Viewed 12.3k times · Source

I managed to draw some basic d3 force layout graph, but struggling how to fix root node at the center.

My data is rather simple; one root node with one-level children. Only one level. Another particular thing about my graph is that the link distance varies based on some parameter.

I want root node to be at the center of the graph.

Setting its property 'fixed':true doesn't work. Any idea to place root node at the center?

Answer

FernOfTheAndes picture FernOfTheAndes · Feb 18, 2014 
force.on("tick", function() {
    nodes[0].x = w / 2;
    nodes[0].y = h / 2;

That should do it.

Related questions

How do I remove all children elements from a node and then apply them again with different color and size?

So I have the next force layout graph code for setting nodes, links and other elements: var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .…

Read More
Fix Node Position in D3 Force Directed Layout

I want some of the nodes in my force-directed layout to ignore all forces and stay in fixed positions based on an attribute of the node, while still being able to be dragged and exert repulsion on other nodes and …

Read More
Is there a way to zoom into a D3 force layout graph?

D3 has a force directed layout here. Is there a way to add zooming to this graph? Currently, I was able to capture the mouse wheel event but am not really sure how to write the redraw function itself. Any …

Read More