30 ms·

The only case I have is I love to use D3 for vis. But the thing is it's trivial to embed D3 into a react component and either let react handle rendering via sv

The only case I have is I love to use D3 for vis. But the thing is it's trivial to embed D3 into a react component and either let react handle rendering via svg or honestly just let D3 take over the DOM in that component. I do this all the time and it works very well.

nawgz 5y ago
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
- cyral 5y ago
  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/ https://airbnb.io/visx/ They converted a ton of d3 features into proper React components
  - nawgz 5y ago
    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
  - davidbarker 5y ago
    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.
  - nazka 5y ago
    Awesome library. I used it back when it was named Vx with react-spring and d3. You can’t beat this combo.
whimsicalism 5y ago
Does d3 have a typescript wrapper?
- eyelidlessness 5y ago
  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 https://www.npmjs.com/package/@types/d3

nawgz 5y ago

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

cyral 5y ago
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/ https://airbnb.io/visx/ They converted a ton of d3 features into proper React components
- nawgz 5y ago
  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
- davidbarker 5y ago
  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.
- nazka 5y ago
  Awesome library. I used it back when it was named Vx with react-spring and d3. You can’t beat this combo.

whimsicalism 5y ago

Does d3 have a typescript wrapper?

eyelidlessness 5y ago
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 https://www.npmjs.com/package/@types/d3