如何将 d3.js 图形（可调用树）转换/导出为 SVG/PDF/PNG答案

【问题标题】：How to convert/export d3.js graph (callapsible tree) to SVG/PDF/PNG如何将 d3.js 图形（可调用树）转换/导出为 SVG/PDF/PNG
【发布时间】：2013-11-21 13:14:59
【问题描述】：

我正在构建一个 d3.js 可折叠树，并将这个 (http://bl.ocks.org/mbostock/4339083) 示例用于我的工作。这很好用，但我还将提供一个选项来将此树下载/导出为 SVG/PDF/PNG。我搜索了很长时间来处理这个问题，但结果总是一样的。生成的 SVG/PNG 有问题。确切地说，树的节点之间的链接是错误的。

我尝试了这些方法：

ht_tp://jsfiddle.net/plaliberte/HAXyd/

ht_tp://d3export.cancan.cshl.edu/

为了更好地理解请查看此图片！

http://de.tinypic.com/r/30auvec/5

谢谢！

【问题讨论】：

对于几乎所有方法，您都需要内联样式规则。在您的示例中，您似乎需要为所有链接设置.style("fill", "none")。
感谢您的快速回复，但在我的浏览器中，树看起来很棒。仅当我将 SVG 导出/下载为 SVG 或 PNG 时，它看起来就像我的第一张图片（浏览器视图：de.tinypic.com/r/2cy1p43/5）
您是否尝试过按照我的建议内联样式规则？
你太棒了！！！我已在 .css 中对其进行了标记，但在转换中未使用 .css 功能。非常感谢
不客气。我会添加这个作为参考答案。

标签： javascript svg d3.js canvg

【解决方案1】：

大多数将 SVG 转换为其他内容的方法都依赖于 SVG 本身中可用的样式信息，如果您使用外部 CSS，则情况并非如此。也就是说，在您的情况下，您的 CSS 可能如下所示：

path {
  fill: none;
}

在这种情况下，需要将此信息附加到链接才能使转换工作。也就是说，在您的代码中，您需要添加类似这样的内容。

link.style("fill", "none");

转换应该适用于此。

【讨论】：