[uhoh-itsmaciek]

I think this is partly why Amelia suggests rewriting these examples to let React handle the rendering and avoid DOM manipulation in D3. I rewrote a bunch of charting components at work a while ago, and that general approach worked really well for us. In fact, I barely ended up using d3 at all, but the bits that I did use were very handy. I found some of Amelia's other writing very useful in the process, and I blogged about what I learned [1] (for what it's worth, I do talk a bit about handling mouse interactions there).

This is really the central point:

>The crux of the issue is that they both want to handle the DOM.

If you want to use D3 and React together, you need to figure out how to handle this, and there are several reasonable ways to do that. Letting React handle rendering is a natural approach, and works especially well if you are embedding your SVG components in an existing React application.

But the "hand a ref off to D3 and keep React out of that element" approach can also work, especially if you are more familiar with D3 DOM manipulation already.

[1]: https://pganalyze.com/blog/building-svg-components-in-react

[zappo2938]

Especially if the developer is building with React Native which doesn't have canvas or svg natively but rather requires a shim for svg. I'm starting a desktop project with lots of data and I'm currently making some architecture decisions. I'm trying to answer what is the fastest path to MVP without getting locked with tech debt? These posts have been helpful.