Yeah. I thought it was a stupid idea when it first came to me, but the more I thought about it the more it made sense. A fake DOM that supported enough methods to work with D3, but no more. If it needs to work with more libraries in the future you just need to add the missing DOM methods, easy.

And so, react-faux-dom was born. A fake DOM with enough methods to trick D3, including a selector engine and partial support for addEventListener etc. ( addEventListener sets the appropriate prop value, so if you add two, it will overwrite the first, I may improve this later)

You can use the full D3 API (no special React methods), inspect it with React developer tools, have efficient D3 components without carefully placed .enter() / .exit() calls, use React animation techniques instead of D3s (good and bad, both approaches work well) as well as render on the server side. Yeah, buzzword time, this will allow you to have isomorphic charts.

drops mic

I copied one of mbostock’s charts (the awesome creator of D3) and rendered it through react-faux-dom easily. Nothing needed to change, it just works. I’ve also converted a complex chart over to this at work from react-d3-wrap , it was pretty easy to do and now it’s far more efficient. That chart even has dynamic resizing and hover tooltip interaction!

A side effect of migrating that chart over was that I could make use of this.setState({...}) to re-render my chart upon mouse interaction or window resize. It’s now much cleaner and easier to follow in my opinion.

The best thing I can compare this to is a lightweight and simple version of jsdom that targets React elements and only supports the minimum required DOM API to work with D3 (right now).