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

Posted 2023-02-16

【中文标题】d3.js 图形输出成高分辨率打印质量文件？

【英文标题】：d3.js graphs output into high resolution print quality files?

【发布时间】：2012-09-25 00:43:06

【问题描述】：

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

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

我正在寻找的输出格式应该可以被 Illustrator 或 Photoshop 读取。并且最好在导出后不需要更多的视觉操作。如果我必须重新绘制或重新填充颜色或重新拍摄它以获得效果，那真的会失败。

谢谢！

【参考方案1】：

现代浏览器支持链接上的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。

【讨论】：

这真的很好用！我从您的解决方案中收集了attr("xmlns","http://www.w3.org/2000/svg")，以便正确加载图像。如果没有，我会收到一个 xml 错误。

【参考方案2】：

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

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

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

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

【参考方案3】：

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

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

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

【参考方案4】：

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

还有一些方法可以将 d3.js 输出转换为 png 文件。有人在http://jsfiddle.net/plaliberte/HAXyd/ 上用canvg 拼凑了一个jsfiddle。

【讨论】：

谢谢你的推荐，但我不知道你的意思。是否有更多示例来演示如何执行每个步骤？

我认为Bill的意思是你可以打开Developer Tools或者Firebug，在代码检查器中选择svg，复制粘贴到文件中。

这似乎几乎对我有用。但是，当我这样做时，它会切断或切断我的一些文本。知道为什么吗？