TypeScript, plotlyで3dグラフを描画する
vueを使って簡易的なデータの可視化ツールを作ろうとした際にハマったので
忘備録としてまとめる。
なお、普段はバックエンド側が主流でフロントエンドの実務経験はありません。
そんなレベルなので、もし間違いや改善点等あればご指摘いただけると幸いです。
TL;DR
- TypeScript(vue/cli3.0環境)で型定義による補完を効かせながらコーディングしたい
- plotly.js, @types/plotly.js の組み合わせで2D散布図はプロット出来たが3D散布図はWebGLのエラーが出て不可
- plotly.js-distを使うと3D散布図まで表示出来たが、型定義ファイルがなく補完が効かない
- plotly.js-distに@types/plotly.jsのindex.d.tsをコピーして使用したところうまくいった。
プロジェクト作成
プロジェクトはvue/cliを使用して作成します。
node.jsはインストール済みとします。
適当なフォルダで
npm install -g @vue/cli
でvue/cliをインストール。
続いて、
vue create plotly-app
でプロジェクト作成。
なお、マニュアルインストールを選択し、babel,typescript,をインストール。
デコレーターやtslintのインストールなどはお好みで。
plotlyのインストール
AngularでPlotlyのグラフを描画してみた
Plotly.js
を参考にplotly.js、@types/plotly.js をインストールしscatterグラフを作成。
2Dグラフは問題なく作成できたが、3D Scatter を作成しようとしたところ、
3d webgl is not supported
がが表示されて失敗。
Can't register module scatter3d #2502
にもあるように、何人かは同様の現象が出ているようだが解決はしていない模様。
plotly.js-distの使用
公式のページからgithubに飛んでみると、
plotly.js-distを使用しろとのこと。
言われるがままにplotly.js-distをインストール。
- plotly.jsのアンインストール
npm uninstall plotly.js
- plotly.js-distのインストール
npm install plotly.js-dist
読み込みライブラリを変更
// import * as plotly from 'plotly.js'; // <- これを
import * as plotly from 'plotly.js-dist'; // <- これに変える
これで、3D Scatterグラフは描画できた。
でも、型定義ファイルは無いのでエラー出るし（でもトランスパイルは行われる）
補完は効かないしでとてもやりづらい。そのため、何とか型定義ファイルを使用できないか頑張ってみた。
型定義ファイルをコピーする
plotly.jsはアンインストールしているにも関わらず、importをplotly.jsのほうに変更するとwebgl のエラーが出てまた描画できなくなった。ここは理由がわからなかったが、@types/plotly.js/ にあるpackage.jsonとかがなんか関係してるのかな？（よくわかってません。詳しい人教えてください）
でも、さらっと型定義ファイル見た感じでは、結構丁寧に作られててすごいなという印象。なので、何とかこの型定義ファイルを使いまわそうと思い、plotly.js-distのフォルダへコピーしてみたところうまく動きました。
具体的にコピーしたのは以下。
node_modules/@types/plotly.js/index.d.ts → node_modules/plotly.js-dist/index.d.ts
今のところ、型補完も効くし、ビルド後も正常に動いていてとりあえずは使えている感じです。