I wrote my own React components using D3 to do the underlying math but setting up my own DOM rendering. It's ok, my thoughts

Pros:

* I have generic "zoom/pan" implemented. I did this by making a generic ChartContainer with 5 zones - top, right, bottom, left, content - and you specify just the size of the non-content zones (if displaying them at all) and otherwise it behaves responsively (i.e. CSS style on the container is respected in the internal math). When you scroll the left/content/right vertically, or the top/content/bottom horizontally, it virtually scrolls the other components for you. It also of course handles the math, each area of the 5 is passed a DOMRect describing how big of SVG it can render

* I have smart edge routing component on a graph; if you are doing the math yourself on how to position the SVG elements, you can easily describe that graph, so smart edge routing is free

* my library has themes via CSS vars, and the components written in this way are obviously automatically themed

Cons:

* it's a bit verbose for sure, takes some small time and focus. After the initial investment in ChartContainer though, they work freaking awesome

* D3 graphs often come with sweet animations and such, I don't have any capability to emulate this today, I hate to do performance-heavy things like manually doing math every frame in a hooks-based way, and I don't want MobX in my component library

* you sort of lose access to the D3 ecosystem, nothing is free

To be honest, I think I have made a top-tier Gantt with the smart edge routing and zoom, my Graph looks sharp too, and for overhead views it's super nice to be able to zoom and pan and show rulers on the side (imagine showing factory layout, or a board layout, etc). Otherwise, if you are doing more traditional pretty eye-catching stuff, it's not quite meant for that approach

I also went this route and used d3 for the math but my own hand-made SVGs for the rendering so that the DOM is all in "react land".

You may want to check out this library: https://airbnb.io/visx/ They converted a ton of d3 features into proper React components

I’m a huge fan of visx after discovering it a few years ago. I recently needed to create a custom line chart and looked into numerous React-based libraries but none fit exactly what I wanted, so I went back to visx again. It requires more planning, but the results you can get (just like with d3) are incredible.

Nice link, thanks! I built my own axes / legends / mouseovers but this other stuff looks awesome, really nice to be able to compose their parameters too if I offer something like a line chart etc. I will definitely try to integrate some of this

Awesome library. I used it back when it was named Vx with react-spring and d3. You can’t beat this combo.

Does d3 have a typescript wrapper?

As in a wrapper with an API more geared towards statically typed usage? Or just type definitions for the existing D3 APIs? The former is really uncommon (or at least not a particularly commonly idiom), but the latter is typically a quick search for @types/${packageName}. If that’s what you’re after, I was curious and saved you a search, because it would be quite surprising to me if something as popular as D3 was missing type defs: https://www.npmjs.com/package/@types/d3