d3.js图表​​输出到高分辨率打印质量文件？

Question

有没有办法将基于d3.js的html/js中创建的图形,图表,地图等输出到具有出版物打印质量高分辨率的其他数据格式？

这些图表的图形非常棒,但在纸上打印并且高度像素化时会毫无用处.我试图避免在Illustrator中为矢量或photoshop重新绘制它们.

我正在寻找的输出格式应该是Illustrator或Photoshop可读的.最优选的是,一旦输出就不需要更多的视觉操作.如果我不得不重新绘制或重新填充颜色或重新拍摄它以获得效果,那真的会失败的目的.

谢谢!

Answer 1

有更复杂的方法,但快速,简单的方法是从DOM复制svg元素(您可能还需要包含您的css文件),将其粘贴到文件中并使用扩展名.svg保存.之后,您可以在矢量编辑器中打开它.

还有一些方法可以将d3.js输出转换为png文件.有人canvg在http://jsfiddle.net/plaliberte/HAXyd/上放了一个这样做的小伙子.

Answer 2

现代浏览器支持download链接上的属性.如果您使用该download属性创建指向图像的链接,则浏览器将下载该链接而不是在浏览器中打开它.

由于没有可下载的实际文件,您需要做的是将svg字符串编码为数据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.