D3 组件不会在 React 中更新

Question

I am trying to update some bar graphs when a button is clicked.

Here's the button

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

it calls this function, which does successfully update all the states, and right now the graph displays dummy data just fine.

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

and here's my Graph component

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

And when I click the button, the Graphs that have dummy data in them now do actually disappear so componentsWillUpdate is called but it is not redrawing the graphs, and I do not understand why because compnentsDoMount calls this.drawChart() alright.

Answer 1

Don't remove the container:

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

Remove what's in it:

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