reactjs - Chart 中的 SVG 在 Prop 更改后不会重新渲染。 react + d3

Question

尝试使用 d3.js 创建一个简单的条形图。我还提供了一个按钮来创建随机数据，用作 svg 条形图的数据集。但是，svg 中的条形图仅针对第一个数据集呈现。即使我更改了数据集的值，条形图仍然保持不变。需要帮助。

我检查了 Prop ，看它们是否在变化。 Prop 正在更新，但并未更改图表中的条形。

App.js 文件:

 class App extends Component {
  constructor(props){
      super(props)
      this.state={
        dataSet: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
      }
  }

  dataSetCreator = () =>{
    let n = Math.ceil(Math.random()*10);
    this.setState({
      dataSet : [...Array(n)].map(_=>Math.ceil(Math.random()*10))
    })
  }


  render() {
    console.log(this.state.dataSet)
    return (
      <div className="App">
       <div className="d3-chart">
         <span>Bar Chart With D3</span>
       <BarChart  
        data={this.state.dataSet}
        height={500}
        width={500}/>
        <button onClick={()=>this.dataSetCreator()}>Change Data</button>
        </div>
      </div>
    );
  }
}

条形图.js:

class BarChart extends Component{
    componentDidMount(){
        this.createBarChart();
    }

    componentDidUpdate(){
        this.createBarChart();
    }

    createBarChart = ()=>{
        const svgWidth = this.props.width
        const svgHeight = this.props.height;

        var svg = d3.select('svg')
                .attr('width', svgWidth)
                .attr('height', svgHeight)
                .attr('class', 'bar-chart');
        debugger
        var dataset = this.props.data;
        var barPadding = 5;
        var barWidth = (svgWidth / dataset.length);

       svg.selectAll('rect')
                       .data(dataset)
                       .enter()
                       .append('rect')
                       .attr('y', (d)=>svgHeight-(d*5))
                       .attr('height', (d)=>d*5)
                       .attr('width', barWidth-barPadding)
                       .attr('transform', (d, i)=>{
                           var translate = [barWidth*i, 0];
                           return "translate(" + translate + ")"
                       })


    }

    render(){
        console.log(this.props.data)
        return(
            <svg>

            </svg>
        );
    }
}

Answer 1

您需要遵循 general update pattern在 createBarChart

中

createBarChart = () => {

    const svgWidth = this.props.width
    const svgHeight = this.props.height;

    var svg = d3.select('svg')
      .attr('width', svgWidth)
      .attr('height', svgHeight)
      .attr('class', 'bar-chart');

    var dataset = this.props.data;
    var barPadding = 5;
    var barWidth = (svgWidth / dataset.length);

    var rects = svg.selectAll('rect')
      .data(dataset)

    var rectsEnter = rects.enter()
      .append('rect')
      .attr('y', (d) => svgHeight - (d * 5))
      .attr('height', (d) => d * 5)
      .attr('width', barWidth - barPadding)
      .attr('transform', (d, i) => {
        var translate = [barWidth * i, 0];
        return "translate(" + translate + ")"
      })

    rects.attr('y', (d) => svgHeight - (d * 5))
      .attr('height', (d) => d * 5)
      .attr('width', barWidth - barPadding)
      .attr('transform', (d, i) => {
        var translate = [barWidth * i, 0];
        return "translate(" + translate + ")"
      })
    rects.exit().remove();
  }

此外，我在 stackblitz 中遇到 Array.map 无法处理 [...Array(n)] 的问题，因此不得不更改 dataSetCreator(我不是确定这是否适用于您的环境)。

  dataSetCreator = () => {
    let n = Math.ceil(Math.random() * 10);
    let newData = Array.from({ length: n }, () => Math.floor(Math.random() * 39));
    this.setState({
      dataSet: newData
    })
  }

stackblitz