30

Is there a way to output graphs, charts, maps etc created in html/js based on d3.js into other data format with publication print quality high resolution?

The graphics of these charts are fantastic but would be useless when printed on paper and got highly pixelated. I am trying to avoid replotting them in Illustrator for vectors or photoshop.

The output formats that I'm looking for should be readable to Illustrator or Photoshop. And most preferably without much more visual manipulation needed once exported. It would really be defeats the purpose if I would have to replot or refill color or rephotoshop it to get the effect.

Thanks!

4

4 に答える 4

16

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

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

于 2012-10-04T02:29:26.350 に答える
14

最新のブラウザーは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 として保存します。

于 2012-10-04T03:28:09.020 に答える
1

私の d3 グラフでは、提案されたソリューションがうまく機能しません。結果のエクスポート SVG のプロパティの一部 (グラデーションなど) が正しくレンダリングされず、Chrome で表示されるものとは大きく異なります。

私の場合、画像は静的だったので、スクリーンショットで十分でした。ただし、スクリーンショットは作業中のモニターのサイズに制限されます。ただし、別の解決策である webkit2png を見つけてよかったです: http://www.paulhammond.org/webkit2png/

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

于 2013-03-03T11:26:00.247 に答える
0

高解像度のラスター画像に保存してもよければ、Firefox のアドオンである Pearl Crescent Page Saver を使用するのが最善の解決策であることがわかりました。

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

基本バージョンでは、画像をスケーリングするオプションが提供されます。たとえば、200% にスケーリングすると、.png の解像度が単純なスクリーンショットで得られる解像度の 2 倍 (4 倍のピクセル数) になります。

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

于 2014-01-26T14:53:18.203 に答える