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"

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