D3.js stick parent object in middle of the svg

Question

I have modified Collapsible Force Layout http://mbostock.github.io/d3/talk/20111116/force-collapsible.html example: ...and now it looks like this All circle are now dragable. I want to stick middle circle (blue circle) middle of the svg. Is it possible? Thank you. ``` <script> var width = 960, height = 600, root; var force = d3.layout.force() .linkDistance(175) .charge(-200) .gravity(0) .size([width, height]) .on("tick", tick); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var link = svg.selectAll(".link"), node = svg.selectAll(".node"); d3.json("graph.json", function(error, json) { root = json; update(); }); function update() { var nodes = flatten(root), links = d3.layout.tree().links(nodes); // Restart the force layout. force .nodes(nodes) .links(links) .start(); // Update links. link = link.data(links, function(d) { return d.target.id; }); link.exit().remove(); link.enter().insert("line", ".node") .attr("class", "link"); // Update nodes. n…

Accepted Answer

What you need to do for this is set the `fixed` property of the node in question to `true` (see the documentation) after having set its coordinates to the center, so something like

```
nodes.forEach(function(d) {
   if(d._children || d.children) {
     d.x = width/2, d.y = height/2;
     d.fixed = true;
   }
});
```

immediately at the start of the `update` function.

If you want to disable drag for that node as well, you can do

```
nodeEnter.filter(function(d) {
           return d.children === undefined && d._children === undefined;
         })
         .call(force.drag);
```

instead of calling `force.drag` on all the nodes. Complete example here.

D3.js stick parent object in middle of the svg

Solution

Problem