Question

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

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

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

谢谢！

Answer 1

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

还有一些方法可以将d3.js输出转换为png文件。有人在http://jsfiddle.net/plaliberte/HAXyd/ canvg与{{1}}进行了一次混音。

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，你可以在插画中打开下载的文件，没有任何问题。

但是有一些问题：你必须声明你的样式内联（你不能使用外部css样式表进行样式化）。

快速而肮脏的解决方案是将svg代码输出到警告框：

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

将警报复制到文本文件中并另存为svg。

Answer 3

对于我的d3图表，建议的解决方案效果不佳。生成的导出SVG的某些属性（用于演示渐变）不能正确呈现，看起来与Chrome显示的非常不同。

在我的情况下，图像是静态的，因此屏幕截图已经足够了。但是，屏幕截图仅限于您正在使用的显示器的大小。但是，我很高兴我找到了另一种解决方案，webkit2png： http://www.paulhammond.org/webkit2png/

此工具允许在任意大小的屏幕上查看网站的屏幕截图。它非常适合转换静态d3图形。我希望它可以帮助我，因为它帮助了我。

Answer 4

如果您乐意保存为高分辨率光栅图像，我发现最佳解决方案是使用Pearl Crescent Page Saver，一个Firefox插件：

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

基本版本为您提供缩放图像的选项 - 例如缩放到200％会将.png的分辨率提高一倍（像素数的4倍），只需简单的屏幕截图即可获得。

如果您需要矢量，并且在Illustrator中加载svg对您来说不合适，您可以尝试渲染到超级高分辨率，然后使用Illustrator的实时跟踪......

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

4 个答案:

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

4 个答案:

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