D3渲染SVG.我如何以编程方式获得SVG

D3 renders SVG. How can I get that SVG programmatically?

本文关键字：SVG 编程 方式获 渲染 D3      更新时间：2023-09-26

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

相关文章：