D3渲染SVG.我如何以编程方式获得SVG
D3 renders SVG. How can I get that SVG programmatically?
我有一个页面,在加载时运行javascript,使用d3在SVG中呈现地图。我想自动获得HTML + SVG的副本。我不能只curl服务器——这只会在javascript运行前返回页面的HTML。我想我可以使用硒或僵尸——但有没有更简单的方法?
我们最近不得不做一些非常类似的事情。以下是我们尝试过的一些方法:
- 使用jsdom
- 使用phantomjs访问页面并抓取输出
- 使用一些服务器端语言+数据格式重写
- 不要操作DOM
JSDOM
是的,它支持SVG,但不支持SVG 1.1。这意味着text元素不能在其他元素中工作。不过,它最终可能会得到这种支持。
PhantomJS
这工作,但它可能是缓慢的。判断SVG是否完成呈现的唯一方法是向页面添加一个类或元素,并让幻像等待该对象出现。一旦它使用标准DOM操作获取svg元素。在几个ajax调用之后,对于屏幕上大约1k个对象,这可能需要5秒。6k个对象,花了大约一分钟。
在服务器端重写
最终,我们必须这样做,因为我们在屏幕上有很多对象。我们有一些数据模型来模拟输出。这是更快的,因为它是基于字符串的,不需要一堆DOM查找/写入和不旋转一个泄漏的浏览器也是一个加分项。缺点是,你将有两个实现相同的代码。
不要使用D3或Raphael
如果你能够使用字符串/模板编写SVG,那么你可以在客户端和服务器端使用相同的JS。回想起来,这似乎是迄今为止最好的方法。如果我能回到过去,我会对我们使用Raphael的事实表现得更不满,而只是努力使用车把、主干、渲染和节点服务器。
您可以通过nodejs运行d3服务器端来渲染svg(如@meetamit所暗示的),然后将其序列化为文件。
使用D3和Node.js创建SVG文件问题是您必须在某些时候呈现Javascript,这是CURL无法做到的。我会尝试查看http://phantomjs.org/
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何更改<svg>标记为<img>用js标记
- jquery动画可以通过编程链接吗
- 一点javascript元编程&可链接的设置器
- 锚点元素不't使用svg时,请打开EDGE上的href
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 使用onclick绘制SVG路径
- 以编程方式确定由 SVG 路径生成的形状
- 如果不使用HTML按钮,就无法通过编程方式触发SVG动画
- SVG 动画在以编程方式设置样式时有效,但在仅使用样式表时无效
- 将 svg 转换为 base64.以编程方式创建的
- 如何以编程方式转换SVG
- 是否可以通过编程方式控制svg
- 为什么要以编程方式插入SVG <元素不绘制,除了d3.js
- SVG & lt;用gt;标记现在显示时,编程插入
- 用javascript以编程方式创建SVG图像元素
- 如何在svg元素上以编程方式ng绑定属性
- 以编程方式创建SVG锚点元素
- D3渲染SVG.我如何以编程方式获得SVG