3 ms·
There are a number of libraries that bridge React and D3, but if you want to do it from scratch you have two primary options: 1. use D3's low-level components
by tlrobinson 10y ago
There are a number of libraries that bridge React and D3, but if you want to do it from scratch you have two primary options:
1. use D3's low-level components to calculate layouts then render directly as React components, typically SVG elements, e.x. https://jsfiddle.net/g3o6t9xh/1/ https://jsfiddle.net/g3o6t9xh/1/
2. use React's component lifecycle methods to grab the component's DOM element and render full D3 visualizations, e.x. https://jsfiddle.net/6xw2wvbc/2/ https://jsfiddle.net/6xw2wvbc/2/
- tomgp 10y agoI've been using option 1. (without React) to leverage d3's functionality on the server side, outputting templated SVGs after using a layout function to create transformations scalings etc. on the data. I've taken this approach on a few project over the last year and am confident it's a pretty good way forward, mirroring as it does the approach d3 takes for pie charts, treemaps and so on. A simple example; the svg elements on this page https://ig.ft.com/sites/brexit-polling/ https://ig.ft.com/sites/brexit-polling/