title: Update D3 force layout CSS in real-time
body: <p>I'm building a real-time visualization based on the D3 force layout. I'm able to generate the force layout from an initial set of nodes/edges data. However, the nodes/edges data keep undergoing real-time changes and I need to update various CSS properties of selected graph nodes/edges accordingly - eg: at time t1, node n1's fill color may need to be changed to orange, at t2, edge e1 may change stroke-width, etc.</p>
  
  <p>One option to implements such a system is to redraw the entire graph at each update. However, this is inefficient since </p>
  
  <ol>
  <li>The structure of the graph never changes. Only CSS properties associated with the components might change and</li>
  <li>Frequently redrawing the graph makes the visualization very slow and unresponsive.</li>
  </ol>
  
  <p>So, I've been looking for data-binding options where I could initially utilize d3 to draw the graph and then use a data-binding framework/library such as Angular/Knockout to bind CSS properties of the nodes/edges to the backend data model. However, I couldn't find any helpful references/examples that have adopted such a strategy.</p>
  
  <p>I've used D3 in the past. However, I'm new to Angular and Knockout.</p>
  
  <p><strong>Questions</strong></p>
  
  <ol>
  <li>Which of the data-binding options would be best in this scenario?<br>
  Angular/Knockout/etc. </li>
  <li>Are there any examples/reference code that implements something similar?</li>
  </ol>
  
  <p>Thanks in advance</p>