将networkD3图形导出为矢量图形

Question

假设使用R库networkD3生成了一个网络图形。进一步假设可以将该网络图形保存为外部独立的HTML文件（请参见Output部分），或者通过R库htmlwidgets进行呈现。您是否看到任何导出生成的网络的方法，无论是在R内部还是在R外部，作为矢量图形（pdf或svg）？

注意：我理解D3.js库的主要目的不是生成静态数据可视化，但肯定有一种方法可以使用/转换D3网络图形以进行印刷出版。 编辑1：根据CJ Yetman的suggestion，我通过Firefox开发者版检查了HTML文件的DOM属性。使用这种方法，可以具体查看SVG属性（请参见this example），但它们大多是空的。然而，如何像CJ Yetman所示的那样“从DOM中提取SVG”？

- Michael Gruenstaeudl

---

我使用了 https://github.com/wch/webshot（webshot包）来生成在R中生成的HTML的PDF。虽然不完美，但它能够正常工作。 - MDEWITT

你想要提取SVG文件，还是想要一张图片（例如jpg或png）？如果需要的话，我可以提供后者的一些代码。 - Mikkel

@Mikkel 我需要一个矢量图形，比如SVG文件。 - Michael Gruenstaeudl

Answer 1

由于您提到了htmlwidgets，我可以分享一下我的做法。

我将我的 NetworkD3 应用程序作为网页（最简单的方法是在 RStudio 中使用 NetworkD3 Shiny 应用程序模板，创建一个 shinyapps.io 账户并将您的代码插入到他们的服务器中，免费使用）。

然后在 Opera 浏览器中打开您的图表（Chrome 不行），右键单击图表，选择 另存为 PDF...，这将给您矢量化的图形，您可以无限缩放而不失去分辨率。

- FatihSarigol

Answer 2

在浏览器中查看，然后使用浏览器的开发者工具从DOM中提取SVG...一些浏览器（我想是Chrome）甚至可以右键单击SVG将其保存到本地驱动器。但必须首先在浏览器中呈现它，因为底层JavaScript最终生成SVG。

使用类似 SVG Crowbar这样的工具可能会更容易从网页中保存SVG。

- CJ Yetman

---

谢谢您的回答；如果它确实有效，那将是一种简单明了的方法。不过，我需要一些额外的信息。我可以通过Firefox开发者版检查HTML文件的DOM属性，甚至可以具体查看SVG属性（请参见：https://pasteboard.co/IvwB3tt.png）。然而，如何像您所说的那样*“从DOM中提取SVG”*呢？ - Michael Gruenstaeudl

在SO上有许多关于从网页中提取SVG的问题。也许其中一个可以帮助您解决特定的用例。 - CJ Yetman

这是一个简单的工具，用于从网站保存SVG https://nytimes.github.io/svg-crowbar/ - CJ Yetman

@CJYetman，SVG Crowbar 对我来说运行良好，谢谢。 - GitHunter0

Answer 3

这里有一段代码... 假设您已经将图表渲染到具有id="watcher"的div中。

<button onClick={() => alert(document.getElementById('watcher').innerHTML)} style={{ padding: '10px' }}>
    Show generated html/svg
</button>

以上是React的代码，但可以适用于任何环境。

因此，您可以使用以下行将呈现的HTML抓取到变量中：

svgMarkup = document.getElementById('watcher').innerHTML

基本上它是一个字符串，您可以将其发送到后端进行保存或写入文件。

另一种方法是在服务器端呈现SVG并直接将其保存到文件中，而无需显示它。D3应该能够处理这个。

- Mikkel