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

我是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发布到服务器，并对其执行任何操作，例如将其存储在数据库中

---

要重新创建图表，可以从数据库中读取xml并将其原样传递到浏览器。我用phantomjs（一种无头web浏览器）在服务器端完成了这项工作，它一直运行良好

据我所知，D3.js只会更改数据在客户端的显示方式。要做到这一点，我想您必须遍历可视化，获取存储所需的内容并将其推送到数据结构（即，数据库）。但请注意，您还必须改变检索数据的方式来解释这一点-我无法想象这是一项容易的任务。是的，这将起作用，但随后您将有一个“静态”页面，其中的交互将无法像原始d3图形中那样进行。@Gilsha的回答启发了一种恢复状态和进行互动的方法：