javascript - D3 呈现 SVG。如何以编程方式获取该 SVG？

Question

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

Answer 1

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

• 使用jsdom
• 使用phantomjs访问页面并抓取输出
• 使用一些服务器端语言+数据格式重写
• 完全不要操作 DOM

JSDOM

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

幻影

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

服务端重写

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

不要使用 D3 或 Raphael

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