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

Capturing the visualization created by D3 Library and storing the state in DB

本文关键字：存储 状态 DB D3 创建 可视化 捕获      更新时间：2023-09-26

我是D3库的新手。该应用程序利用D3库绘制图表。一些更改，如按钮点击、缩放，都是在不影响服务器的情况下进行的。

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

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 POST到服务器上，并对其执行任何您喜欢的操作，例如将其存储在数据库中。

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

相关文章：