web-dev-qa-db-ja.com

d3.jsグラフを高解像度の印刷品質ファイルに出力しますか？

D3.jsに基づいてhtml/jsで作成されたグラフ、チャート、マップなどを、出版物の印刷品質の高解像度で他のデータ形式に出力する方法はありますか？

これらのグラフのグラフィックは素晴らしいですが、紙に印刷して高度にピクセル化すると役に立たなくなります。ベクターやフォトショップ用にIllustratorでそれらを再プロットしないようにしています。

私が探している出力形式は、IllustratorまたはPhotoshopで読み取り可能である必要があります。そして、最も好ましくは、一度エクスポートされると、はるかに多くの視覚的な操作を必要としません。効果を得るためにカラーを再プロットまたはリフィルするか、フォトショップをやり直さなければならない場合、それは本当に目的を達成できません。

ありがとう！

htmld3.jsphotoshopadobe-illustrator
30
user1518600

より複雑な方法もありますが、すばやく簡単な方法は、DOMからsvg要素をコピーし（cssファイルも含める必要がある場合があります）、ファイルに貼り付けて、拡張子.svgを付けて保存することです。その後、ベクターエディターで開くことができます。

D3.jsの出力をpngファイルに変換する方法もあります。誰かが http://jsfiddle.net/plaliberte/HAXyd/ でcanvgを使用してこれを行うjsfiddleをまとめました。

16
Bill

最新のブラウザは、リンクのdownload属性をサポートしています。 download属性を使用して画像へのリンクを作成すると、ブラウザ内で画像を開くのではなく、ブラウザがダウンロードします。

ダウンロードする実際のファイルはないので、svg文字列をdata-uriとしてエンコードするだけで、あとは...

var download = d3.select("body").append("a").attr("href", "#")

download.on("click", function(){
      d3.select(this)
        .attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#viz").html()))
        .attr("download", "viz.svg") 
    })

ここでデモを見ることができます http://bl.ocks.org/3831266 ダウンロードしたファイルをillustratorで問題なく開くことができます。

ただし、いくつかの落とし穴があります。スタイルをインラインで宣言する必要があります（外部のcssスタイルシートでスタイルを設定することはできません）。

すばやく簡単な解決策は、svgコードをアラートボックスに出力することです。

download.on("click", function(){
  alert(d3.select("#viz").html())
});

アラートをテキストファイルにコピーし、svgとして保存します。

13
methodofaction

私のd3グラフでは、提案されたソリューションはうまく機能しません。結果のエクスポートSVG（たとえば、グラデーション）の一部のプロパティは正しくレンダリングされず、Chromeが示すものとは非常に異なって見えます。

私の場合、画像は静的だったので、スクリーンショットで十分でした。ただし、スクリーンショットは、作業しているモニターのサイズに制限されています。ただし、webkit2pngという代替ソリューションを見つけてうれしいです。 http://www.paulhammond.org/webkit2png/

このツールを使用すると、Webサイトが任意のサイズの画面を見ているときにスクリーンショットを作成できます。静的なd3グラフの変換に最適です。それが私を助けてくれたので、それが誰かを助けることを望んでいます.

1
themiurgo

高解像度のラスターイメージに保存してよろしければ、Firefoxのアドオンであるパー​​ルクレセントページセーバーを使用するのが最善の方法です。

https://addons.mozilla.org/en-US/firefox/addon/pagesaver/

基本バージョンには、画像を拡大縮小するオプションがあります。 200％にスケーリングすると、.pngの解像度が単純なスクリーンショットで得られる解像度の2倍（4倍のピクセル）に増加します。

ベクトルが必要で、Illustratorでsvgをロードしてもうまくいかない場合は、超高解像度のpngにレンダリングしてから、Illustratorのライブトレースを使用してみてください...

0
RobinL