Blackbox Components

Blackbox components are the simplest way to integrate D3 and React. You can think of them as wrappers around D3 visualizations.

You can take any D3 example from the internets or your brain, wrap it in a thin React component, and it Just Works™. Yes, we go against what I just said and let D3 control a small part of the DOM tree.

We throw away most of React’s power, but we gain a quick way to get things working.

I call the approach “blackbox” because React’s engine can’t see inside your component, can’t help with rendering, and has no idea what’s going on. From this point onward in the DOM tree, you are on your own. It sounds scary, but it’s okay if you’re careful.

Here’s how it works:

• React renders an anchor element
• D3 hijacks it and puts stuff in

You have to manually re-render on props and state changes. You’re also ...