React + D3

Purpose

I'm trying to find a clean and easy to understand way for d3 and react to work together.

I've followed Curran's videos on the subject but the integration seems rather messy. In this viz I'll try to only wrap the root html element (svg) in React and leave al sub-elements to d3. I wonder if that approach will still allow me to have React manage the data.

Solutions

Wrap pre-created svg

One solution would be to generate the linechart and store the encapsulating svg in a var. The react component would wrap the svg in a wrapper element. The downside of this is that it's not really a reusable component anymore as it points to a svg statically. This means that the whole react lifecycle for components is bypassed and can't be used properly.

Full integration

This means wrapping each viz element in a react Component as Curran has done. The downside is it creates a lot of overhead, the syntax is hard to read and easy to mess up.

Separate concerns properly

Haven't figured out how to do this but ideally you could separate the d3 logic for creating a viz from the react component. Each new component would create a new viz dynamically and with its own props. It looks like ELijah Meeks might have a solution for this that's still pretty elegant.