30

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

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

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

谢谢！

4

4 回答 4

16

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

还有一些方法可以将 d3.js 输出转换为png文件。canvg有人在http://jsfiddle.net/plaliberte/HAXyd/上整理了一个 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/

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

于 2013-03-03T11:26:00.247 回答
0

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

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

基本版本为您提供了缩放图像的选项 - 例如，缩放到 200% 将使 .png 的分辨率增加一倍（像素数的 4 倍），您可以通过简单的屏幕截图获得。

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

于 2014-01-26T14:53:18.203 回答