在cytoscape.js中操作后如何保存图形的整个状态 [英] How to save an entire state of a graph after being manipulated in cytoscapejs

问题描述

我正在按角度使用cytoscapejs，我希望用户在进行一些操作(例如平移，缩放，移动节点和边缘)后保存图形的状态.

I am using cytoscapejs in angular, I want to the user to save a state of the graph after having done some manipulation (e.g panning, zooming, moving nodes and edges).

我试图将整个对象保存在一个临时变量中，并尝试通过单击按钮将保存的对象重新加载到图形中，从而从图形中还原图形.

I tried to save the entire object in a temporary variable and tried to render the graph back from it by reloading the graph with the saved object on a click of a button.

 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位置也可以在从元素重新渲染时得到保存和渲染，这也行不通.

the code above is how I am initializing the "cy" object which renders the graph. I tried saving this.cy.json() also tried taking out the elements using this.cy.json().elements, expecting that x and y positions will also get saved and rendered on re-rendering from the elements, which also didn't work.

可用于角度的Cytoscape的参考文献很少.欢迎任何建议.

There are very fewer references available to work with Cytoscape with angular. Any suggestions are welcome.

非常感谢！

推荐答案

我提取了节点和边线(其中还包含每个节点的x，y坐标，而不是保存无效的整个cy对象)，是我所需要的)从cy对象中移除.

Instead of saving the whole cy object, which didn't work, I extracted the nodes and edges(which also contains the x, y coordinates of each node which is all I needed) out of the cy object using.

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

并使用已更新的元素和布局名称设置为预设"的方式调用初始化代码

and call the initialization code with the updated elements and layout name set to 'preset'

这篇关于在cytoscape.js中操作后如何保存图形的整个状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！