我有一个在加载时运行 javascript 的页面,该页面使用 d3 在 SVG 中渲染 map 。我想自动获取该 HTML + SVG 的副本。我不能只是 curl 服务器——它只是在 javascript 运行之前返回页面的 HTML。我想我可以使用selenium 或zombiejs——但是有更简单的方法吗?
最佳答案
我们最近不得不做一些非常相似的事情。以下是我们尝试过的一些事情:
- 使用 jsdom
- 使用phantomjs访问页面并抓取输出
- 使用某种服务器端语言+数据格式重写
- 根本不要操作 DOM
JSDOM
是的,它支持 SVG,但不支持 SVG 1.1。这意味着文本元素不起作用。但它最终可能会得到这种支持。
PhantomJS
这有效,但可能很慢。判断 SVG 是否完成渲染的唯一方法是向页面添加类或元素,并让幻像等待该对象出现。一旦它使用标准 DOM 操作获取 svg 元素。对于屏幕上大约 1k 个对象,经过几次 ajax 调用后,这可能需要 5 秒。 6k 个对象,大约需要一分钟。
在服务器端重写
最终,我们必须这样做,因为屏幕上有很多对象。我们采用了一些数据模型并模仿了输出。这更快,因为它是基于字符串的,不需要大量的 DOM 查找/写入,而且不启动有漏洞的浏览器也是一个优点。缺点是您将拥有相同代码的 2 个实现。
不要使用 D3 或 Raphael
如果您能够使用字符串/模板编写 SVG,那么您可以在客户端和服务器端使用相同的 JS。回想起来,这似乎是迄今为止最好的方法。如果我能够回去,我会对我们使用 Raphael 的事实表现得更加不满,并且只是大力使用 Handlebars 、主干、rendr 和节点服务器。
关于javascript - D3 渲染 SVG。我如何以编程方式获取该 SVG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22482414/