title: Graph orientation and node positioning in d3.js
body: <p>Thanks to this earlier <a href="https://stackoverflow.com/q/11894057/1036544">question</a>, I produced a static fixed-layout graph as below using force layout in <code>d3.js</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/07Gyq.png" alt="enter image description here"></p>
  
  <p>and I have two specific questions to further customize the layout:</p>
  
  <p>First, I notice that initializing nodes positions deterministically (e.g. done diagonally here, see the <a href="https://stackoverflow.com/q/11894057/1036544">script</a> for details) fixes the positions of the nodes, and the orientation of the nodes seem to depend on this initialization as well as the dimensions of the force graph*. I wonder how can I make the nodes <code>A, D, E, F, I</code> in the graph above <strong>aligned horizontally</strong>? In other words, I want to turn the orientation of the graph anti-clockwise for roughly 45 degrees. I have tried to initialize the nodes horizontally in the middle:</p>
  
  <pre><code>nodes.forEach(function(d, i) { d.x = w / size * i; d.y = h / 2; });
  </code></pre>
  
  <p>but the produced output has all the nodes and edges horizontally at where they were initialized.</p>
  
  <p>Second, is it true that the force graph is automatically centered within the <code>svg</code> element? If no, how can we make it so? If yes, how can we specify a center for the force graph within the <code>svg</code> element? </p>
  
  <p>(* Note: strangely, when setting <code>.size([w, h])</code> where <code>w = h</code> for the force graph, and deterministically initializing the nodes along a diagonal, all the nodes and edges are positioned along that diagonal in the output, why?)</p>