d3.js图形如何输出高分辨率的打印质量文件？

Question

有没有一种方法可以将使用d3.js创建的基于html/js的图形、图表、地图等以出版物打印品质的高分辨率数据格式输出？

这些图表的图形效果非常出色，但在纸张上打印时会失去意义并且出现高度像素化。我试图避免在Illustrator中重新绘制它们以获得矢量或photoshop。

我正在寻找的输出格式应该可读取到Illustrator或Photoshop。最好是导出后不需要进行太多的视觉处理。如果必须要重新绘制或重新着色或重新photoshop，那么这真的就失去了目的。

谢谢！

- FongYu

Answer 1

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

还有一些方法可以将d3.js输出转换为png文件。有人使用canvg制作了一个jsfiddle来实现这个目的，网址是http://jsfiddle.net/plaliberte/HAXyd/

- Bill

---

谢谢您的建议，但我不确定您的意思。是否有更多的示例来演示如何完成每个步骤？ - FongYu

我认为Bill的意思是你可以打开开发者工具或Firebug，选择代码检查器中的svg，将其复制并粘贴到文件中。 - methodofaction

这对我来说似乎几乎可以工作。然而，当我这样做时，它会切断或截断我的一些文本。有什么想法为什么会这样？ - btm1

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") 
    })

您可以在这里查看演示，您可以在Illustrator中打开下载的文件而不会出现任何问题。

然而，有一些需要注意的地方：必须使用内联样式声明样式（不能使用外部CSS样式表）。

一个快速而简单的解决方案是将SVG代码输出到警告框中：

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

将警报复制到文本文件中，并保存为svg格式。

- methodofaction

---

这个非常好用！我从你的解决方案中获取了 attr("xmlns","http://www.w3.org/2000/svg")，以便图像可以正确加载。如果没有它，我会收到一个 XML 错误。 - Johnathan Elmore

Answer 3

我的 d3 图表提出的解决方案效果不佳。导出的 SVG 文件中一些属性（例如渐变）未能正确地呈现，与 Chrome 显示的样子非常不同。

在我这种情况下，图像是静态的，所以截屏可能已经足够了。然而，截屏的大小受限于您使用的显示器大小。但是，我很高兴我找到了另一种解决方案，即 webkit2png： http://www.paulhammond.org/webkit2png/ 这个工具可以创建网站的屏幕截图，就像它们在任意大小的屏幕上看起来一样。 它非常适合转换静态的 d3 图表。 我希望它能像帮助我一样帮助其他人。

- themiurgo

Answer 4

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

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

基本版本提供了缩放图像的选项 - 例如，将缩放到200％将使.png的分辨率增加一倍（比简单截图多4倍像素）。

如果您需要矢量图形，并且在Illustrator中加载svg无法正常工作，您可以尝试渲染为超高分辨率png，然后使用Illustrator的Live Trace...

- RobinL