D3.jsなどのライブラリの普及によってWebでデータビジュアライゼーションをするということが流行りつつあります。 さて、D3.jsでは主にSVGとして画を描くことになるんですが、書き出されたSVGを簡単に保存して他のドキュメントに貼付けるといった手段がないので困ることがあります。 せっかくSVGで描かれた画をスクリーンショットで保存するのはイマイチですよね。 というわけで、img要素の画像のように右クリックをして保存ができるようなD3 Plugin、d3-downloadableを作ってみました。
インストール
bowerにパッケージを登録してあります。
bower install d3-downloadable
npmも対応しました。(2015/05/12)
使い方
script、cssを読み込んで、svg要素のselectionに対して、downloadable()をcallするだけ。 svg要素を右クリックするとメニューが表示され、SVG、PNG、JPEG形式でダウンロードすることができます。
d3.select('svg#chart')
.call(downloadable().filename('fig'));
HTML全体はこんな感じ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="bower_components/d3-downloadable/d3-downloadable.css"/>
</head>
<body>
<svg id="fig" width="200" height="200">
<rect width="200" height="200" x="0" y="0" fill="lightgray"></rect>
<rect width="150" height="150" x="25" y="25" fill="red" fill-opacity="0.5"></rect>
</svg>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/d3-downloadable/d3-downloadable.js"></script>
<script>
d3.select('svg#chart')
.call(downloadable().filename('fig'));
</script>
</body>
</html>
動かすとこんな感じ。
http://jsfiddle.net/likr/rg8Wp/
ダウンロード可能なSVGを書く
これでどんなSVGでも簡単にダウンロードできるようになるのかというと、実はそうでもありません。 D3.jsのサンプルでも、SVGのスタイルをCSSで外部ファイルもしくは、SVGの外のstyle要素に書いている例がよくありますが、d3-downloadableによってSVG部分だけを取り出してきた場合、それらのスタイルが適用されないのでブラウザで見た時と異なる見た目になる場合があります。
なので、SVGをダウンロードできるようにする場合には、可搬性を意識してSVGを書く必要があります。単純なのは、全てのstyleをそれぞれの要素に直接書いてしまうことですが、それが難しいようなら、svg要素の中にdefs要素を作って、その中にstyle要素を書くことができます。
参考
実装にあたってこの辺が参考になりました。