D3.jsで作成したグラフ(SVG)を画像として保存する - Tech-Sketch先日公開した D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう の記事ではD3.jsをつかってグラフを作成しました。本記事ではD3.jsで作成したSVG形式のグラフをPNG形式の画像として保存する方法をご紹介します。 D3.jsにはCSVやJSONなど 様々なデータ形式を扱う為の便利なメソッド が用意されており、アプリケーションへの組み込みが容易です。しかしアプリケーションへの組み込みとなると、「X月X日の状態のグラフを保存しておきたい」、「グラフを資料に添付したい」といった要望も出てくるのではないでしょうか。 単純に画面のスクリーンショットを取得する以外では Phantom.js を利用してキャプチャを取得する方法や Apache Batik を利用してSVGを変換する方法などが考えられましたが、クライアントサイドだけで完結しない上、実装が少々手間です。
