無法將 d3 與反應一起使用

Question

我想在使用 react-bootstrap 創建的模態 window 中顯示 d3 圖形。 首先，我嘗試直接在（非模態） div元素內顯示 d3 圓圈。 我嘗試如下：

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>
      </>
    );
  }
}

它的工作可以在這個代碼框中看到：

現在我嘗試將 d3 circle 添加到使用 react-bootstrap 創建的模式彈出窗口中，如下所示：

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);

但是，這不起作用，可以在此代碼框中看到：

它確實顯示了模態對話框，但沒有 D3 圓圈。 為什么會這樣？

參考文獻： 1 , 2

Answer 1

我意識到我們必須在組件生命周期方法中處理渲染。 在這種情況下，在componentDidMount方法中。 我們只需要在點擊事件中操作 state。 我能夠使用 class 組件執行此操作，如下所示：

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);

這是工作代碼框。