React + d3js：使用React和d3的部分或让d3自己做

Question

在回顾了几篇博文后，我没有得到满意的答案。

我已经看到有反应创建组件的帖子和d3处理该组件内的所有内容（输入，更新，退出），我看到过帖子建议在SVG内部创建和删除节点并让d3处理那些更改属性节点。

我还有很新的反应，但我有很多d3js经验。 为什么我要让React控制SVG节点而不是让d3完全处理可视化。

优缺点都有什么？

我知道react使用虚拟dom而d3使用类似的东西（我认为它叫做Smash）。

对于上下文信息，这里有一些我正在引用的博客文章：

• http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
• https://medium.com/@sxywu/on-d3-react-and-a-little-bit-of-flux-88a226f328f3#.3wjjs32q0
• http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/

Answer 1

你是对的，因为在这个问题上没有达成共识。 我花了很多时间自己调查一下，这是我的结论：

1. 如果您只是使用一些基本图表，那么还会创建其他库，例如您可以利用的victory.js
2. 如果你不需要像动画那样复杂的东西，可以使用d3进行数学计算，但让渲染做出反应
3. 如果你需要做更复杂，自定义或动画的事情，让d3完成工作。 我最终做的是，我有一个反应组件，只有一个svg元素，并从redux接收道具（数据和动作创建者）。 该组件然后处理其他一切。 我在该组件文件夹中有一个完整的文件夹结构，专门用于我从组件中提取的各种渲染，动画和交互需求。 您应该创建交互功能，激活您的动作创建者并传递您需要的任何信息，以便您可以使您的商店保持最新并根据需要传递新的道具。 这个解决方案工作得很好，性能很高，并且让两个库都能做到最好。 另外，由于你已经对d3感到满意，你不必做任何与正常情况不同的事情。 您最终会得到一个可重复使用的组件，它可以在反应生态系统中使用道具并且运行良好。