D3 組件不會在 React 中更新

Question

我試圖在單擊按鈕時更新一些條形圖。

這是按鈕

  <button className="login_buttons" onClick={this.setRecommendations}>
            Click to See Top Tracks and Recommendations
          </button>

它調用這個函數，它成功地更新了所有的狀態，現在圖形顯示虛擬數據就好了。

setRecommendations(){
    getAlbums().then(albums =>{
      this.setState({topAlbums: albums[0]});
      this.setState({album_count: albums[1]});
    });
    getArtists().then(artists =>{
      this.setState({topArtist: artists[0]});
      this.setState({artist_count: artists[1]});
    });
    getGenres().then(genres =>{
      this.setState({topGenre: genres[0]});
      this.setState({genre_count: genres[1]});
    });
    popularityData().then(popData =>{
      this.setState({popRange: popData[0]});
      this.setState({pop_count: popData[1]});
    });
    recommendations().then(recs => {
      this.setState({recommendations: recs});
    });
  }

這是我的 Graph 組件

import React from 'react';
import * as d3 from "d3";

class Graphs extends React.Component {
  componentDidMount() {
    this.drawChart();
  }

  componentDidUpdate() {
       d3.select(`#${this.props.graphID}`).remove()
       this.drawChart();
      }

  drawChart() {
    const data = this.props.data;
    const labels = this.props.axisLabels;
    const title = this.props.title;
    const margins = {top:50, right:50, bottom:50, left:50}
    const h = 600 - margins.top - margins.bottom;
    const w = 600 - margins.right - margins.left;
    var x = d3.scaleBand()
              .range([0, w])
              .domain(labels);
    var y = d3.scaleLinear()
              .range([h, 0])
              .domain([0, d3.max(data)]);

    const svg = d3.select(`#${this.props.graphID}`)
                  .append("svg")
                  .attr("width", w + margins.right + margins.left)
                  .attr("height", h + margins.top + margins.bottom)
                  .append("g")
                  .attr("transform", `translate(${margins.left}, ${margins.top})`);

          svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("y", (d) => y(d))
            .attr("x", (d, i) => (x.bandwidth()*i + 10))
            .attr("height", (d) => h - y(d))
            .attr("width", x.bandwidth() - 10)
            .attr("fill", "blue");

          svg.append("g")
              .attr("transform", `translate(0, ${h})`)
              .call(d3.axisBottom(x))

          svg.append("g")
              .call(d3.axisLeft(y));

          svg.append("text")
              .attr("x", (w/2))
              .attr("y", 0 - (margins.top / 2))
              .attr("text-anchor", "middle")
              .style("font-size", "16px")
              .style("fill", "white")
              .style("text-decoration", "underline")
              .text(title);
  }

    render(){
      return <div id={this.props.graphID} />
    }
}
export default Graphs

當我按一下按鈕，在他們有虛擬數據的圖表，現在實際上已消失，使componentsWillUpdate被稱作但不重繪圖形，我不明白為什么，因為compnentsDoMount調用this.drawChart()好吧。

Answer 1

不要移除容器：

 d3.select(`#${this.props.graphID}`).remove()

刪除其中的內容：

d3.select(`#${this.props.graphID}`).selectAll('*').remove()