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感到滿意，你不必做任何與正常情況不同的事情。 您最終會得到一個可重復使用的組件，它可以在反應生態系統中使用道具並且運行良好。