visx

動機

目標

目標是建立一個元件庫，您可以利用它來創建自己的可重複使用的圖表庫，或您精巧的客製化一次性圖表。visx 在很大程度上是沒有偏見的，並且旨在在此基礎上構建。縮減您的套件大小，並僅使用您需要的套件。

如何運作？

在底層，visx 使用 d3 進行計算和數學運算。如果您在 visx 之上建立自己的出色圖表庫，則可以輕鬆創建一個完全隱藏 d3 的元件 API。這意味著您的團隊可以像使用可重複使用的 React 元件一樣輕鬆地創建圖表。

但為什麼要這樣做？

混用兩種更新 DOM 的心智模型永遠不是好主意。將 d3 程式碼複製並貼到 componentDidMount() 中正是如此。這個元件集合可讓您輕鬆建立自己的可重複使用的視覺化圖表或程式庫，而無需學習 d3。不再需要選擇或 enter()/exit()/update()。

常見問題

1. visx 代表什麼？

   visx 代表視覺化元件 (visualization components)。

2. 您是否計畫支援動畫/轉場？

   對 visx 的一個常見批評是它沒有內建動畫，但這是經過深思熟慮的選擇。不將其內建是一個強大的功能。

   想像一下您的應用程式已經捆綁了 react-motion，新增一個假設的 @visx/animation 是多餘的。由於 visx 是 react，它已經支援所有 react 動畫函式庫。

   圖表函式庫就像樣式指南。每個組織或應用程式最終都希望完全控制自己的實作。

   visx 讓每個人都更容易做到這一點。無需每次都重新發明輪子。

   更多資訊：https://github.com/airbnb/visx/issues/6

   範例

   • 使用 react-move 的可摺疊樹狀圖，由 @techniq 提供 (Demo) (放射狀 Demo)
   • 使用 react-spring 的動畫，由 @drcmda 提供 (Demo)

3. 我是否必須使用每個套件才能製作圖表？

   不用！挑選您需要的套件。

4. 我可以使用這個來為我的團隊建立我自己的圖表程式庫嗎？

   請盡情使用。

5. visx 是否能與 preact 搭配使用？

   可以！需要別名化 react + react-dom 並使用 preact-compat。

6. 我喜歡使用 d3。

   我也是。