Combining React and D3 by letting D3 manage the DOM

d3-dom-example.tsx

import { select } from 'd3-selection';
import * as React from 'react';

interface Props {
  data: number[];
  width: number;
  height: number;
}

export default class BarChart extends React.Component<Props> {
  private svgRef?: SVGElement | null;

  public componentDidMount() {
    this.drawChart(this.props.data);
  }

  public componentWillReceiveProps(nextProps: Props) {
    if (nextProps.data !== this.props.data) {
      this.drawChart(nextProps.data);
    }
  }

  private drawChart(data: number[]) {
    const svg = select(this.svgRef!);
    /* ...Draw the chart with D3... */
  }

  public render() {
    const { width, height } = this.props;

    return (
      <svg width={width} height={height} ref={ref => (this.svgRef = ref)} />
    );
  }
}