Unable to use d3 with react

Question

I wanted to display a d3 graphics inside a modal window created using react-bootstrap. First I tried displaying d3 circle directly inside (non-modal) div element. I tried it as follows:

import "./styles.css";
import React from "react";
import * as d3 from "d3";

export default class App extends React.Component {
  testRef = React.createRef();

  constructor(props) {
    super(props);
    this.changeText = this.changeText.bind(this);
  }

  async changeText() {

    let svg = d3
      .select(this.testRef.current)
      .append("svg")
      .attr("width", 200)
      .attr("height", 200);

    // Add the path using this helper function
    svg
      .append("circle")
      .attr("cx", 100)
      .attr("cy", 100)
      .attr("r", 50)
      .attr("stroke", "black")
      .attr("fill", "#69a3b2");
    // this.testRef.current.innerHtml = "Test123";
  }

  render() {
    return (
      <>
        <div className="App">
          <div ref={this.testRef} />
          <button onClick={this.changeText}> Draw circle inside div </button>
        </div>
      </>
    );
  }
}

And its working as can be seen in this codesandbox :

Now I tried to add d3 circle to modal popup created using react-bootstrap as shown below:

import React from "react";
import ReactDOM from "react-dom";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import * as d3 from "d3";

import "./styles.css";

class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { modalShow: false };
  }

  testRef = React.createRef();

  showD3 = () => {
    this.setState({ modalShow: true });
    // console.log(this.testRef.current);
    let svg = d3
      .select(this.testRef.current)
      .append("svg")
      .attr("width", 200)
      .attr("height", 200);

    // Add the path using this helper function
    svg
      .append("circle")
      .attr("cx", 100)
      .attr("cy", 100)
      .attr("r", 50)
      .attr("stroke", "black")
      .attr("fill", "#69a3b2");
  };

  render() {
    let modalClose = () => this.setState({ modalShow: false });

    return (
      <>
        <ButtonToolbar>
          <Button variant="primary" onClick={this.showD3}>
            Launch vertically centered modal
          </Button>
        </ButtonToolbar>
        <Modal show={this.state.modalShow} onHide={modalClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            D3 in React
            <div ref={this.testRef}></div>
          </Modal.Body>
        </Modal>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

However this doesnt work as can be seen in this codesandbox :

It does show the modal dialog, but without D3 circle. Why is this so?

Referenecs: 1 , 2

Answer 1

I realized that we have to handle rendering in component life cycle methods. In this case in componentDidMount method. We have to just manipulate the state in the click event. I was able to do this with class components as follows:

import React from "react";
import ReactDOM from "react-dom";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import * as d3 from "d3";

import "./styles.css";

class App extends React.Component {
  constructor(...args) {
    super(...args);
    let _color = "#" + Math.floor(Math.random() * 16777215).toString(16);
    this.state = { modalShow: false, color: _color, showChart: false };
  }

  chart = React.createRef();

  componentDidUpdate() {
    if (this.state.modalShow) {
      this.renderChart();
    }
  }

  renderChart() {
    let svg = d3
      .select(this.chart.current)
      .append("svg")
      .attr("width", 200)
      .attr("height", 200);

    svg
      .append("circle")
      .attr("cx", 100)
      .attr("cy", 100)
      .attr("r", 50)
      .attr("stroke", "black")
      .attr("fill", this.state.color);
  }

  changeChartState() {
    let _color = "#" + Math.floor(Math.random() * 16777215).toString(16);
    this.setState({ color: _color });
  }

  showD3 = () => {
    this.setState({ modalShow: true });
    this.changeChartState();
  };

  render() {
    let modalClose = () => this.setState({ modalShow: false });

    return (
      <>
        <ButtonToolbar>
          <Button variant="primary" onClick={this.showD3}>
            Launch vertically centered modal
          </Button>
        </ButtonToolbar>
        <Modal show={this.state.modalShow} onHide={modalClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            D3 in React
            <div ref={this.chart}></div>
          </Modal.Body>
        </Modal>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the working codesandbox .