title: d3 force layout nodes always start at top-left of screen
body: <p>I have a force layout with nodes defined as follows...</p>
  
  <pre><code>nodes = someData.map(function (d) {
          return {
              image_location: d.image_location, 
              image_width: d.image_width, 
              image_height: d.image_height, 
              aspect_ratio: d.aspect_ratio,
              radius: circleRadiusScale(d.someCount),
              x: width/2,
              y: height / 2,
              px: width/2,
              py: height/2,
              cx: width/2,
              cy: height / 2
          };
      });     
  </code></pre>
  
  <p>And then the force layout being created later in the code with...</p>
  
  <pre><code>force = d3.layout.force()
      .gravity(.05)
      .alpha(0.1) 
      .size([width, height])
      .on("tick", tick); 
  
  force.nodes(nodes)
        .start();
  </code></pre>
  
  <p>The reason I've forced the x/y, px/py, cx/cy values is that I'm simply trying to ensure that the nodes don't always start being projected at the top left of the browser (which is only for a split second until the force simulation takes affect, but is pretty noticeable especially on firefox or mobile devices).</p>
  
  <p>What's strange to me is that I'm starting the force layout with my x/y, cx/cy, px/py values BEFORE the code I've written joining circles, images etc that the browser should display - in other words, this code comes AFTER defining/starting the force layout...</p>
  
  <pre><code>node = svg.selectAll(".node")
                .data(force.nodes(), function(d) { return d.id; })
                .enter()           
                .append("g")
                .attr("class", "node") etc to append circles, images...
  </code></pre>
  
  <p>So I'm wondering how to hold back the projection of the nodes by the browser until I know the force layout has an initial position of something other than 0,0.  Thanks for any thoughts!</p>