javascript - Update D3 force layout CSS in real-time -


i'm building real-time visualization based on d3 force layout. i'm able generate force layout initial set of nodes/edges data. however, nodes/edges data keep undergoing real-time changes , need update various css properties of selected graph nodes/edges accordingly - eg: @ time t1, node n1's fill color may need changed orange, @ t2, edge e1 may change stroke-width, etc.

one option implements such system redraw entire graph @ each update. however, inefficient since

  1. the structure of graph never changes. css properties associated components might change and
  2. frequently redrawing graph makes visualization slow , unresponsive.

so, i've been looking data-binding options utilize d3 draw graph , use data-binding framework/library such angular/knockout bind css properties of nodes/edges backend data model. however, couldn't find helpful references/examples have adopted such strategy.

i've used d3 in past. however, i'm new angular , knockout.

questions

  1. which of data-binding options best in scenario?
    angular/knockout/etc.
  2. are there examples/reference code implements similar?

thanks in advance


Comments