D3 渲染 SVG。如何以编程方式获取该 SVG？答案

【问题标题】：D3 renders SVG. How can I get that SVG programmatically?D3 渲染 SVG。如何以编程方式获取该 SVG？
【发布时间】：2014-03-26 01:47:53
【问题描述】：

我有一个在加载时运行 javascript 的页面，它使用 d3 在 SVG 中呈现地图。我想自动获取该 HTML + SVG 的副本。我不能只卷曲服务器——它只是在 javascript 运行之前返回页面的 HTML。我想我可以使用 selenium 或zombiejs——但有没有更简单的方法？

【问题讨论】：

通过普通的旧 Javascript 获取 <body> 标签的 innerHTML 不是一种选择？
@juan.facorro 我需要一种将其写入文件的方法。我不认为 js 可以写入文件（出于安全原因）。
您可以使用 node.js 渲染它，这将允许您保存到文件中。由于 node.js 不是浏览器，因此您需要“说 DOM”的东西。 JSDOM with d3 是一个简单的选项，但可能有一些限制，比如如果您需要测量 DOM 中的内容。如果是这种情况，那么您必须使用 phontomjs（zombiejs 建立在其之上）。
当您说您拥有一个页面时，这是否意味着您可以访问页面代码和数据，或者该页面是否托管在您想要的外部网络服务器上要报废？
如果你只调用 svg on-complete 会得到什么 - var shouldbeallyousvg = d3.selectAll("svg");你不能分两部分做吗，我想你生成的 html 可能很简单，可以发布或卷曲等。

【解决方案1】：

我们最近不得不做一些非常相似的事情。以下是我们尝试过的几件事：

JSDOM

是的，它支持 SVG，但不支持 SVG 1.1。这意味着文本元素在其他方面不起作用。不过，它最终可能会获得这种支持。

这可行，但可能很慢。判断 SVG 是否完成渲染的唯一方法是向页面添加类或元素，并让幻像等待该对象出现。一旦它使用标准 DOM 操作抓取 svg 元素。在几次 ajax 调用后，屏幕上大约有 1k 个对象，这可能需要 5 秒。 6k 个对象，大约需要一分钟。

最终，我们不得不这样做，因为屏幕上有很多对象。我们有一些我们采用并模仿输出的数据模型。这更快，因为它是基于字符串的，并且不需要一堆 DOM 查找/写入，并且不启动泄漏的浏览器也是一个优点。不利的一面是，您将拥有相同代码的 2 个实现。

如果您能够使用字符串/模板编写 SVG，那么您可以在客户端和服务器端使用相同的 JS。到目前为止，这似乎是回想起来最好的方法。如果我能够回去，我会对我们使用 Raphael 并努力使用把手、主干、rendr 和节点服务器这一事实表现得更加不满。

【讨论】：

【解决方案2】：

您可以通过 nodejs 运行 d3 服务器端来渲染 svg（正如 @meetamit 所暗示的那样），然后将其序列化为文件。

【讨论】：

我要试试这个。您是否使用文本元素或任何 SVG 1.1 功能对其进行了测试？
@Parris 我自己没有尝试过，但是查看nodejs's xmldom project 它与 W3C DOM level2 和一些 level 3 兼容。我不确定这是否包含 SVG 1.1（可能不是）。但它可能会自动工作。

【解决方案3】：

问题是您必须在某些时候呈现 Javascript，而 CURL 无法做到这一点。我会尝试研究类似http://phantomjs.org/

【讨论】：