title: d3.js graph layout (force) centering root node
body: <p>I modified the les miserables code to implement what I am trying to do.  I want to have a graph, where there is one root node, and then only one level of nodes connected to that node.</p>
  
  <p>As is, without trying to center the root node, it sort of works, but my text labels that were working, are generating errors.  The root node is positioned by default to the extreme upper left corner of the screen.  the child nodes are linked and floating to the middle of the screen.  </p>
  
  <ol>
  <li>I am trying to set the link distance based on an integer variable,<br>
  but that does not seem to work.  </li>
  <li>The text labels for the nodes are not showing up (generating cx=NaN cy=NaN etc.. errors in the error log) </li>
  <li>How do I center the root/source=0 node  without everything else breaking or disappearing?</li>
  </ol>
  
  <p>I have the code (minus the json reading issue).  Please let me know if anyone has an tips. thanks.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  .node {
    cursor: move;
    stroke: #fff;
    stroke-width: 1.5px;
  }
  .node.fixed {
      fill: #f00;
  }
  
  .link {
    stroke: #999;
    stroke-opacity: .6;
  }
  
  &lt;/style&gt;
  
  &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
  &lt;script type="text/javascript" src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  
  
  //Size of region to render on
  var width = 960,
      height = 500;
  
  
  //D3 force directed layout
  //Try playing with the charge and link distance
  var force = d3.layout.force()
      .charge(-100)
      //.linkDistance(40)
      .linkDistance(function(d) { return Math.sqrt(d.distance);})
      //.on("tick", tick) //event ADDED
      .size([width, height]);
  
  //Add our canvas
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  
  //Select the miserables data ;)
  d3.json("nodes.json", function(error, graph) {
    force
        .nodes(graph.nodes)
        .links(graph.links)
        .start();
  
  //Add the links
    var link = svg.selectAll(".link")
        .data(graph.links)
        .enter().append("line")
        .attr("class", "link")
        //.style("stroke-width", function(d) { return Math.sqrt(d.value); });
          .style("stroke-width", 2);
  
  //Add the nodes
    var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 10)
        .call(force.drag)
          .style("stroke-width", 4)
          .style("stroke", function(d) { if (d.M==1) {return d3.rgb(203,24,29)}
                 else  {return d3.rgb(0,109,44)};})
          .style("fill", d3.rgb(246,232,195)); //});
  
  
  
   //add labels
    var labels = svg.selectAll("text")
          .data(graph.nodes)
          .enter()
          .append("text")
          .attr({"x":function(d){return d.x;},
                "y":function(d){return d.y;}})
  
          .text(function(d) {
                if (d.name.length &gt; 6) {return d.name.substring(0,6)+'...'}
                else    { return null } ;})
          .call(force.drag);
  
  
  //Update stuff for animation:
  //   This takes the physics simulation for the force directed graph and
  //   sets the location of the nodes and edges to the new positions
  
  force.on("tick", function(e) {
  
  // soft-center the root node
           // soft-center the root node
  //         var k = .01;
  //         var nodes = force.nodes();
  //         nodes[0].y += (height/2 - nodes[0].y) * k;
  //         nodes[0].x += (width/2 - nodes[0].x) * k;
  //nodes[0].fixed=true;
  //           
      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; });
  
      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
  
      labels.attr("x", function(d) { return d.x; })        // **NEW**
             .attr("y", function(d) { return d.y; });
  
  
  
    });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>nodes.Json</p>
  
  <pre><code>{
    "nodes":[
  
   {"name": "XXX.XXXX", "distance": 0, "M":0},
   {"name": "1", "distance": 0.2,  "M":0}, // I had .2, which did not read in, but adding a 0, &amp; it works
   {"name": "2", "distance": 1.8,"M":0},
   {"name": "3", "distance": 4.5, "M":0},
   {"name": "4", "distance": 2.5,  "M":0},
   {"name": "5", "distance": 1,  "M":0},
   {"name": "6", "distance": 7,  "M":0},
   {"name": "7", "distance": 1,  "M":0},
   {"name": "8", "distance": 3,  "M":1},
   {"name": "9", "distance": 10,  "M":1},
   {"name": "10", "distance": 20,  "M":1},
   {"name": "11", "distance": 3,  "M":1},
   {"name": "12", "distance": 25,  "M":1},
   {"name": "13", "distance": 35,  "M":1}
  ],
  "links":[
  
            {
            "source": 0,
            "target": 0
            },
            {
            "source": 0,
            "target": 1
            },
            {
            "source": 0,
            "target": 2
            },
            {
            "source": 0,
            "target": 3
            },
            {
            "source": 0,
            "target": 4
            },
            {
            "source": 0,
            "target": 5
            },
            {
            "source": 0,
            "target": 6
            },
            {
            "source": 0,
            "target": 7
            },
            {
            "source": 0,
            "target": 8
            },
            {
            "source": 0,
            "target": 9
            },
            {
            "source": 0,
            "target": 10
            },
            {
            "source": 0,
            "target": 11
            },
            {
            "source": 0,
            "target": 12
            },
            {
            "source": 0,
            "target": 13
            }
  ]
  }
  </code></pre>