Angularjs 如何模拟。从D3角度或反应过渡

Angularjs 如何模拟。从D3角度或反应过渡,angularjs,reactjs,transition,Angularjs,Reactjs,Transition,全部: 我想知道,如果我想使用React JSX或Angle template来替换D3 DOM操作(例如.enter().append().exit().remove()),我如何在其中任一个操作中实现.transition().duration()之类的动画转换 例如,我构建了一个折线图,在d3中,在我更改数据集并生成新路径后,这些线会有动画进行变换 谢谢所以,在React中使用D3.js的问题是双方都想要控制DOM,对吗 D3希望直接选择元素,根据所使用的数据添加元素或删除元素,并向这些元

全部:

我想知道,如果我想使用React JSX或Angle template来替换D3 DOM操作(例如.enter().append().exit().remove()),我如何在其中任一个操作中实现.transition().duration()之类的动画转换

例如,我构建了一个折线图,在d3中,在我更改数据集并生成新路径后,这些线会有动画进行变换


谢谢

所以,在React中使用D3.js的问题是双方都想要控制DOM,对吗

D3希望直接选择元素,根据所使用的数据添加元素或删除元素,并向这些元素添加属性

React喜欢在其虚拟DOM中表示所有内容,不喜欢未经其同意对实际DOM进行任何更改

经过一些研究,一些人尝试利用React的一些不同的生命周期方法,在组件生命周期的不同阶段提出特定的D3方法。例如,一种方法希望您将false返回给ComponentWillUpdate,并使用函数的副作用在实际DOM上运行D3代码。虽然这在某些情况下有效,但它仍然是对React的不当使用,并且您正在失去将状态传递给组件可能正在渲染的任何子组件的好处

我建议研究其中一些方法,看看人们是如何试图解决这个问题的,看看问题的根源

另外,请随意试用我和我的朋友制作的这个库,它允许您按原样插入现有的D3代码,返回React组件,并处理转换、动画、计时器等

一直在寻找更多的反馈