reactjs - D3组件在收到新的props后不会重新绘制

Question

我正在 React.js 上构建一个小型应用程序，并使用 D3 绘制与其接收到的 Prop 相对应的立方体。

class Visual extends React.Component {

renderD3 = (records, selector) => {
    const data = records;
    console.log('inside renderD3', data);
    // It logs out most updated props every time it receives new props

    const visual = this.props.connectFauxDOM('div', selector);
    d3
        .select(visual)
        .attr('class', 'visual-wrapper')
        .selectAll('div')
        .data(data) // bind data
        .enter()
        .selectAll('div') 
        .data(d => d3.range(d.duration / 5).map(() => d)) 
        .enter()
        .append('div')
        .attr('class', 'block')
        .style('background-color', d => d.color);
}

componentDidMount() {
// it is just for generating gray grids for background setting, please ignore 
    this.renderD3([{duration: 300, color: '#e6e6e6'}], 'defaultBox')
}
render() {
    this.renderD3(this.props.records, 'box')
    return (
        <div>
            <div className="line-container">{this.props.defaultBox}</div>
            <div className="line-container">{this.props.box}</div>
        </div>
    );
}

}

我想要实现的是，一旦visual组件收到新的 Prop ，D3就会用新的颜色重新绘制(新的 Prop 有不同的颜色)。

到目前为止，在 renderD3 函数内，它接收新的 Prop ，并且在控制台上，它确实正确记录新 Prop ，但立方体仍然具有相同的颜色。问题是，如果我进行哈希刷新，则颜色会发生变化，就像 D3 中使用新 Prop 绘制立方体一样。

我想象过，一旦 Visual 组件每次收到新的 props 重新渲染，D3 立方体就会自动重绘(或更新)立方体。但在 renderD3 函数内部，它接收新的 props 并在每次重新渲染时记录新的 props，D3 立方体不会改变。

我对 React 相当熟悉，但对 D3 知之甚少。顺便说一下，我正在使用react-faux-dom将d3与react集成。

如果有任何见解，我将不胜感激。

提前谢谢您。

Answer 1

所以，据我所知，您正在使用 connectFauxDOM 工具，当您不需要动画时，该工具实际上是为动画保留的？ (我可能是错的......)

文档存在一个已知问题，尚不清楚您是否需要使用此工具。您应该能够使用普通的无状态 API:

const ReactFauxDOM = require('react-faux-dom');

class Visual extends React.Component {
  renderD3 = (data) => {
    console.log('inside renderD3', data);
    // It logs out most updated props every time it receives new props

    const el = ReactFauxDOM.createElement('div');

    d3.select(el)
      .attr('class', 'visual-wrapper')
      .selectAll('div')
      .data(data) // bind data
      .enter()
      .selectAll('div') 
      .data(d => d3.range(d.duration / 5).map(() => d)) 
      .enter()
      .append('div')
      .attr('class', 'block')
      .style('background-color', d => d.color);

    return el.toReact();
  }

  render() {
    return (
      <div>
        <div className="line-container">{this.renderD3(this.props.records)}</div>
      </div>
    );
  }
}

如果您打算使用动画，则需要 connectFauxDOM。如果您不需要执行此类操作，那么正常的 createElement 和 toReact 流程应该更容易使用。我希望这有帮助!