如何在 cytoscapejs 中操作后保存图形的整个状态

Question

我在 angular 中使用 cytoscapejs，我希望用户在完成一些操作（例如平移、缩放、移动节点和边缘）后保存图形的状态。

我尝试将整个对象保存在一个临时变量中，并尝试通过单击按钮重新加载包含已保存对象的图形来从中渲染图形。

 const cy_contianer = this.renderer.selectRootElement('#cy');
      const localselect = this.select;
      this.cy = cytoscape({
            container : cy_contianer,
            layout: this.layout,
            minZoom: this.zoom.min,
            maxZoom: this.zoom.max,
            style: this.style,
            elements: this.elements,
        });

上面的代码是我如何初始化呈现图形的 "cy" 对象。我试着保存 this.cy.json() 还尝试使用 this.cy.json().elements 取出元素，期望 x 和 y 位置也将在从元素重新渲染时得到保存和渲染，这也没有用。

可用于使用 Cytoscape 和 angular 的参考资料非常少。欢迎提出任何建议。

非常感谢！

Answer 1

我没有保存整个 cy 对象，这不起作用，而是从 cy 对象中提取了节点和边（其中还包含我需要的每个节点的 x、y 坐标）。

let elements = {
   nodes: this.savedCyInstance.elements().nodes().jsons()
   edges: this.savedCyInstance.elements().edges().jsons()
}

并调用初始化代码并将更新的元素和布局名称设置为 'preset'

如何在 cytoscapejs 中操作后保存图形的整个状态

How to save an entire state of a graph after being manipulated in cytoscapejs

javascript

cytoscape.js

angular