Bad example of integrating ReactJS + d3.js

let_d3_render.jsx

// inside yr React component 
  componentDidMount: function() {
    var el = this.getDOMNode();
    D3Chart.create(el, props);
  },

  componentDidUpdate: function(prevProps, prevState) {
    var el = this.getDOMNode();
    D3Chart.update(el, props);
  },

  render() {
    return (
      <div>
        <h3>Some cool chart</h3>
        <div className={"chart"}></div>
      </div>
    );
  }

// then in yr d3 component
const create = (el, props, state) => {
  this.update(el, props, state);
};

const update = (node, props, state) => {
  const el = d3.select(node).select('.chart').node();
  const svg = ChartUtils.createSVG(el, props);
  const chart = svg.append("g").attr("class", "d3-chart")
    .attr("transform", "translate(0," + props.margin.top +")");

  const scales = ChartUtils.scales(props, domain);
  const dateAccessor = ChartUtils.dateAccessor(scales.x);
  const heartRateAccessor = ChartUtils.propertyAccessor(scales.y, "hrv");
  const areaName = "other";

  drawTicks(chart, props, scales, numYTicks);
  drawArea(chart, props, scales, maxData, dateAccessor, heartRateAccessor, areaName);
  drawPoints(chart, props, scales, props.data, dateAccessor, heartRateAccessor, "hrv");
}