d3.js - Confuse about the overlap and collision between React and D3 -

all:

i pretty new react, trying turn d3 data visualization chart react component, there 1 confuses:

i not quite understand react's virtualdom, 1 thing believe d3 can not directly operation on it(only real dom can operated d3, right?), question is:

how can take full advantage of react? if not true, show me code use both d3 , virtualdom make chart data updating operation , animation transition

thanks

you're correct d3 not operate on react's virtual dom, , d3 therefore not directly compatible react. unfortunate, there 2 ways around it.

1) make operate on virtual dom. react-faux-dom job of this, , makes lot of d3 work make sense in context of react. https://github.com/olical/react-faux-dom

2) use escape hatch, , manipulate dom directly. essentially, intercept new props in componentwillreceiveprops , set shouldcomponentupdate return false. there, take data componentwillrecieveprops , want dom refs d3 elements.

neither case particularly beautiful. there isn't perfect solution doing d3 inside of react applications yet.