visx

動機

目標

目標は、独自の再利用可能なグラフ ライブラリ、または使い勝手のよい特別なグラフを作成するために使用可能なライブラリを作成することです。visx は意見にとらわれず、拡張することを目的としています。バンドルのサイズを小さく抑え、必要なパッケージのみを使用してください。

方法

visx では、内部的に計算や数学用に d3 が使用されています。visx を基盤に独自の優れたグラフ ライブラリを作成する場合、d3 を完全に隠すコンポーネント API を簡単に作成できます。つまり、チームは再利用可能な React コンポーネントを使用するのと同じくらい簡単にグラフを作成できます。

その理由は

DOM 更新用の 2 つのメンタル モデルを混同することは決して良いことではありません。d3 コードを componentDidMount() にコピー アンド ペーストするのはまさにそれです。このコンポーネントのコレクションを使用すると、独自の再利用可能なビジュアライゼーション グラフやライブラリを簡単に構築でき、d3 を学習する必要はありません。選択や enter()/exit()/update() は不要です。

FAQ

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 (デモ) (半径方向デモ)
   • react-spring を使用したアニメーション、作成者: @drcmda (デモ)

3. グラフを作成するためにすべてのパッケージを使用する必要がありますか。

   必要ない！必要なパッケージを選択してください。

4. これを使用してチーム用の独自のグラフ ライブラリを作成することはできますか。

   是非行ってください。

5. visx は preact で動作しますか。

   はい！react と react-dom にエイリアスを設定し、preact-compat を使用してください。

6. 私は d3 を使用することに慣れています。

   私もです。