Question

所有

就像标题所说，我正在尝试构建一个可以接受转换/持续时间/缓动道具的组件，以实现数据可视化项目的动画转换（主要用于切换数据集）。

我不确定某个组件是否是在React中实现此目的的正确方法，如果不是，请在React中建议以任何方式执行此操作。

谢谢

Answer 1

尝试将这两个库结合使用的不幸之处在于它们与DOM交互的方式。

D3直接选择元素，然后将数据绑定到这些元素，并根据数据集添加，更新或删除元素。

React喜欢将所有内容都包含在其虚拟DOM中，并且在未经其同意的情况下不喜欢对实际DOM进行任何更改。

有些人会通过禁用某些生命周期方法并使用功能性副作用来完成D3的方法来解决这个问题。

class ExpenseComponent extends React.Component {
  componentDidMount() {
    // wrap element in d3
    this.d3Node = d3.select(this.getDOMNode());
    this.d3Node.datum(this.props.data)
      .call(ExpenseVisualization.enter);
  },

  shouldComponentUpdate(nextProps) {
    if (nextProps.data.update) {
      // use d3 to update component
      this.d3Node.datum(nextProps.data)
        .call(ExpenseVisualization.update);
      return false;
    }
    return true;
  },

  componentDidUpate() {
    this.d3Node.datum(this.props.data)
      .call(ExpenseVisualization.update);
  },

  render() {
    // …
  }
}

虽然这适用于某些情况，但您将失去将状态传递给组件可能呈现的任何子组件的好处。

我建议研究一些人们试图解决问题的方法，看看问题的根源。

另外，我可以随意尝试这个库，我和朋友可以按原样插入现有的D3代码，然后返回React组件，处理转换，动画，定时器等。

http://react-d3-library.github.io/

一直在寻找更多反馈！

React中的示例有关如何实现D3的.transition（）。duration（）。ease（）等

1 个答案: