Hacker News Reader

Comment by iyn | Hacker News Reader

What's the best way to integrate D3 and react? Or there's a better approach to charts/visualization in react than using D3?

View on HN

I don’t know about the “best” way, but there are quite a few ways people have explored so far; Google [d3 react] for starters… D3 4.0 introduces a new option which is to use the D3 minilibraries d3-scale, d3-shape, d3-hierarchy etc. without d3-selection, so that you manipulate the DOM exclusively through React. (Of course I’m biased and still recommend D3’s data-join and transitions for animating between views, but now there’s more flexibility.)

I agree, though I've found that the animation story with React for anything even mildly complex is still pretty terrible.

My day job is building big data visualization applications with lots of D3 and React, so I have a lot of opinions about this.

If you can get away with using CSS transitions or react-motion in your app, and you don't need D3's enter-update-exit selections, I feel React's declarative syntax is a much simpler mental model and is consistent with how the rest of my app works. But anything complex you'll need to drop out of React and build your DOM in D3, which has a very different notion of element lifecycles than React and doesn't allow you to reuse any of your other React components.

You don't really need anything special to integrate it with React, just a little wrapper component which calls your update method. This example isn't DRY but whatever, gives you the idea: https://gist.github.com/tj/38b04d87949c4dbc3bda4579a108b634

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/

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/

I'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/

This is a shameless plug, but I like the approach in my book React+d3js -> http://swizec.com/reactd3js

Code samples in the book still use D3 v3, but my most recent experiments have been in v4. There's a lot of content in there on animation and transitions, which seems like the hard part.

Currently figuring out how to do mass 10k+ element animations. Adding it to the book when I figure it out.

You'll probably want to use D3 to build a React component. The component provides the API to the rest of your application, while D3 takes over dataviz heavy lifting inside the component.

The most interesting aspect, which applies to apps beyond React, is likely to be respecting the D3 selections API[1], if needed. If you're already familiar with the ins and outs of selections, then I wouldn't expect any particular problems.

[1] https://github.com/d3/d3/blob/master/API.md#selections-d3-se...

I wrote a react component to map react props to D3 accessor functions, and then use the react lifecycle functions to trigger D3 redraw.

http://bl.ocks.org/cpapazian/6228888157c39be85e9c (please excuse the coffeescript)

However, it looks like the work to modularize D3 will make it much, much easier to have the render function produce SVG markup directly.

D3 is a relatively low-level library for composing custom visualizations. There are some good high-level abstractions on top that integrate well with React and provide specific kinds of preconfigured charts. You might want to check out Uber's React Vis components: https://github.com/uber/react-vis

You might try http://web.horde.org/reactd3.org/

It mostly uses React to interface with DOM and d3 v4.0 for the math, etc.

I've used this with pretty good success. https://github.com/skellyb/react-d3-wrap

I've recently been experimenting with pure SVG and React, which seems like a really good fit. Just draw SVG in your render function as naively as possible, and let React figure out the DOM transitions. Super easy to debug and reason about.

Not being too familiar with D3, what would I get by adopting it? I would hope for higher level primitives, but the API seems imperative and stateful, which doesn't seem like a good fit with React. Would I end up duplicating and syncing my existing app model state into D3 state?

Take a look at these introductions to d3-scale and d3-shape for why you might want visualization-related abstractions to help you with React:

https://medium.com/@mbostock/introducing-d3-scale-61980c5154...

https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d...

We built a workflow design ui with svg under react and for the most part it is an absolute pleasure. Also pretty neat that you can treat the svg as an image/thumbnail. If you need the svg to be interactive, overlaying html works well too.

Example at http://flowgear.me/s/1Ae7Pso if you're interested.

One thing to watch out for is that there are some svg object attributes (and some objects) that aren't declared in react.

You can generally use them with 'is', for example: <marker id={'bar'} is markerHeight={viewModel.height} refX={viewModel.xCenter} markerWidth={viewModel.width}>

You get speed. For animation, doing a dom diff each frame is really slow. D3 is way way faster. For data visualization, d3 has a lot of well built extensions.

I tend to go in the other direction, I use d3 rather then react for the rest of the page, so I don't have any issues with integration.

http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/

https://github.com/Olical/react-faux-dom

The nice thing is that you can mix and match D3 components as needed, e.g. require certain layouts or other pure functions but use React in lieu of DOM binding (if that's preferred for one reason or another) and not use the D3 selections.

If you aren't able to easily use browser libraries in React it's time to rethink React, not rethink those browser libraries.

Reply on news.ycombinator.com