javascript - D3 渲染 SVG。我如何以编程方式获取该 SVG?

标签 javascript html svg d3.js zombie.js

我有一个在加载时运行 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/

相关文章:

javascript - 对列表进行排序和删除重复项的最有效算法?

javascript - 如何动态添加谷歌地图信息窗口?

javascript - 计算单词和字符

python - 在python中使用路径而不是形状绘制svg或转换它们

css - 如何保留尽可能多的 SVG 功能

javascript - 为什么/这个网页不包含任何 javascript?

javascript - 多个 html 按钮的一个 javascript 函数

javascript - 为什么有时 ng-init 不触发 $watch 监听器?

javascript - jQuery 值选择器

javascript - 事件监听器被意外附加