visixというライブラリをご存知でしょうか。

d3.jsをReact用に最適化されたAirbnbによってメンテナンスされているOSSプロジェクトです。

かつて私はd3.jsを少しだけ使っていたので、現在実装しているReactのプロダクトでもd3.jsを採用しようとしていたが、どうも相性が悪いらしい。というわけで調べているとちょうどv3.0がリリースされたばかりのvisxというパッケージを見つけました。

表現豊かなビジュアライズ

ギャラリーページを見てみるとさまざまな描画例を見れます。基本的な折れ線グラフ、棒グラフ、円グラフ以外にもネットワークグラフなども対応しているみたいです。

折れ線グラフを使ってみる

というわけで今回は最も基本的なデータ表現である折れ線グラフを描画してみます。

CodeSandboxにサンプルコードを置いてます。

ポイントは、縦軸と横軸、グリッド、頂点のドットがそれぞれが独立したコンポーネントであるということです。

ドキュメントには記載のないPropsもたくさんあるので、ソースコードを潜ってみるとよりカスタマイズするヒントが見つかることがあります。

そんなときはz-indexを調整してあげましょう。

僕はMUIを使っているので、下記のように対処しました。

先の開発では、円グラフや積み上げ棒グラフなども実装する予定なので、もう少しいじっていきます。