d3.js - 关于 React 和 D3 之间的重叠和碰撞的困惑

Question

全部:

我对 React 还很陌生，我想做的是将 D3 数据可视化图表转换为 React 组件，但有一个令人困惑的地方:

我不太了解React的virtualDOM，但是我相信D3不能直接对其进行操作(只有真正的DOM可以通过D3操作，对吗？)，那么问题是:

我们如何才能充分利用 React？如果这不是真的，谁能告诉我一些使用 D3 和 virtualDOM 制作带有数据更新操作和动画转换的图表的代码

谢谢

Answer 1

你说得对，D3 不在 React 的虚拟 DOM 上运行，因此 D3 不直接与 React 兼容。这很不幸，但本质上有两种解决方法。

1) 让它运行在virtual dom上。 react-faux-dom 在这方面做得很好，并且使许多 D3 工作在 React 上下文中变得有意义。 https://github.com/Olical/react-faux-dom

2)使用逃生舱口，直接操作dom。本质上，拦截 componentWillReceiveProps 中的新 props 并将 shouldComponentUpdate 设置为始终返回 false。从那里，从 componentWillRecieveProps 获取数据，并使用 d3 元素的 dom 引用执行您想要的操作。

这两种情况都不是特别漂亮。目前还没有一个完美的解决方案可以在 React 应用程序中执行 D3。