D3 and React -A Design Pattern for Responsive Charts Part 2

Part 2: Dividing the DOM

https://unsplash.com/@kryptonstudio

In Part 1 of this series we created ‘ReactDims,’ a reusable higher order component to obtain the current dimensions of any React DOM node inside an app layout. Here in Part 2, we’ll use that component to create our first fully responsive chart! This is where we’ll really start using the mental model of a DOM divided up into ‘ReactLand’ and ‘D3Land.’

1) Let’s get started by updating ReactNode so it just returns a single empty div element with a height of 100%. Then, we’ll import { useRef } from ‘react’ and create a reference to that empty div. We’re returning an empty div because that will be the last DOM node in ‘ReactLand’. Shortly we’ll use this reference to append an SVG canvas to the DOM using D3. So conceptually this DOM node is where ‘ReactLand’ ends and ‘D3Land’ begins:

const ReactNode = ({dims})=>{
  const domNode = useRef(null);
  /*
  *
  */
  return (
    <div ref={domNode} style={{ height: '100%'}}/>
  )
};

2) D3Land; this is where the real fun starts! We’ll create a new class which we’ll use to instantiate a new D3 visualisation. Within this class we’ll set up a sequence of methods which are invoked in the same order every time, a pattern if you will, so let’s call this class…