title: Cola.js + d3.js force directed network - constraining nodes during/after force solver runs
body: <p>I'm creating a force-directed heirarchy plot using Cola.js and d3.js.  Nodes are stacked on rows using Y constraints which I have pre-calculated based on the maximum depth of a given node in the heirarchy. </p>
  
  <p>Is there a good way using Cola.js to also constrain nodes to columns in conjunction with the force solver?  I want to center the nodes around Y but also use the force solver's positioning to compute shortest edge distance and thus minimize edge crossing.</p>
  
  <p>The goal is to make the plot dragging less "squishy," so nodes should be constrained to columns after/during the force solver positioning.  The fiddle provided below works pretty well, but with very large networks, the overall inertia of the network is high, so dragging a single node does not move the entire network as fast as I want.</p>
  
  <p>If there is a way to stiffen the force solver, so that dragging a node quickly moves the entire network, that could work instead of using the X offset constraints.  Cola attempts to simplify the node solver by eliminating some of the force options that d3 has, such as charge and gravity, so I can't use these (?) to make dragging the network snappier.</p>
  
  <p>Since Cola takes the constraints as an argument prior to running the solver, setting constraints while preserving optimal node positioning is proving difficult.</p>
  
  <p>... (example code too large to paste)</p>
  
  <pre><code>d3cola
      .nodes(graph.nodes)
      .links(graph.relationships)
      .constraints(graph.constraints)
      .symmetricDiffLinkLengths(30)
      .start(5,10,20);
  </code></pre>
  
  <p>...</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/k54ohxor/1/" rel="nofollow noreferrer">http://jsfiddle.net/k54ohxor/1/</a></p>
  
  <p>Cola alignment example: <a href="http://marvl.infotech.monash.edu/webcola/examples/alignment.html" rel="nofollow noreferrer">http://marvl.infotech.monash.edu/webcola/examples/alignment.html</a></p>
  
  <p><img src="https://i.stack.imgur.com/Wkrh5.png" alt="screenshot"></p>
  
  <p>In the above example screenshot, looking at depth level 3 of the heirarchy, you can see that if I pre-constrain the nodes in the order they come in from the database, that would result in poor node positioning and unwanted edge crossing, as the node IDs have the order 7,6,9,8</p>
  
  <p>Thanks</p>