javascript - 捕获由 D3 库创建的可视化并将状态存储在 DB 中

Question

我是 D3 库的新手。该应用程序利用 D3 库来绘制图表。一些更改，如按钮单击、缩放即时发生而无需访问服务器。

有没有办法捕获状态，将状态存储在数据库中，然后重新创建精确的可视化？

Answer 1

D3 图表是可缩放矢量图形 (SVG)。

任何图表的当前状态都可以通过使用 d3 本身选择 SVG 来捕获。例如可以调用：

var allSVGs = d3.selectAll("svg")

此调用将选择页面上的所有 svg 元素。然后，您可以遍历它们并将它们序列化为 xml，如下所示：

var serializer = new XMLSerializer();
allSVGs.forEach(function(svgElement) {
var svg = d3.select(svgElement).attr("version", 1.1).attr("xmlns",
                "http://www.w3.org/2000/svg").node()
        xmlString = xmlString + serializer.serializeToString(svg);

然后，您可以将 xml 发布到您的服务器并对其进行任何您喜欢的操作，例如将其存储在数据库中。

要重新创建图表，您可以从数据库中读取 xml 并将其按原样传递给浏览器。我一直在使用 phantomjs（无头网络浏览器）在服务器端执行此操作，并且运行良好。