捕获由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（无头网络浏览器）这样做，并且它一直运行良好。