如何在不使用 cytoscape.js 重绘图形的情况下删除特定边?

Posted

技术标签:

【中文标题】如何在不使用 cytoscape.js 重绘图形的情况下删除特定边?【英文标题】:How to remove specific edges without redrawing the graph using cytoscape.js? 【发布时间】:2019-06-22 13:16:49 【问题描述】:

给定 cytoscape.js 中的一个节点,我正在尝试删除该节点以及该节点的所有定向(进出)边缘。为此,我编写了一些快速而肮脏的过滤器,但是调用cy.remove(edges); 会在控制台上打印“不存在这样的方法”错误消息。通过相同的方法删除节点可以正常工作,但会删除连接到已删除节点的所有节点,在我的情况下,它是整个图(大多数情况下)。因此,我尝试从数据源中删除边和节点,然后重新绘制图形,但这不是正确的方法,因为它重新绘制图形并更改布局(即刷新画布)。

我该如何解决这个问题?

                //data is the id of the node I want to remove
                var filteredEdges = this.elements.edges.filter((x, idx, arr) => 
                
                    return x.source != data && x.target != data ;
                );

                var removedEdges = this.elements.edges.filter((x, idx, arr) => 
                
                    return x.source == data || x.target == data ;
                );
                //this.cy.remove(removedEdges); this fails

                this.elements.edges = filteredEdges;

                var filteredNodes = this.elements.nodes.filter((x, idx, arr) =>
                
                    return x.id != data;
                );
                this.cy.remove(data);
                this.elements.nodes = filteredNodes;
                this.render(); // this re-draws the whole graph, not a useable approach

【问题讨论】:

【参考方案1】:

使用选择器解决了这个问题。 cytoscape.js 的文档非常缺乏。对于将来某个时候遇到此问题的任何人,我是这样做的:

this.cy.remove('edge[source=\'' + nodeId + '\']');
this.cy.remove('edge[target=\'' + nodeId + '\']');
this.cy.remove('#' + nodeId);

【讨论】:

以上是关于如何在不使用 cytoscape.js 重绘图形的情况下删除特定边?的主要内容,如果未能解决你的问题,请参考以下文章

带有固定节点的 Javascript cytoscape.js 自动布局

Cytoscape js在节点上单击时如何获取所有边缘(文本标签)

Cytoscape.js 的性能和布局

Cytoscape.js 乔木布局画布渲染器?

Vue中使用Cytoscape.js

Cytoscape.js eles.style 更改立即更新