如何在不使用 cytoscape.js 重新绘制图形的情况下删除特定边?
How to remove specific edges without redrawing the graph using cytoscape.js?
给定 cytoscape.js 中的一个节点,我试图删除该节点和该节点的所有定向(进出)边。为此,我编写了一些快速而肮脏的过滤器,但调用 cy.remove(edges);
会向控制台打印一条 'no such method exists' 错误消息。通过相同的方法删除节点效果很好,但会删除连接到已删除节点的所有节点,在我的例子中,这就是整个图(大多数情况下)。所以我尝试从我的数据源中删除边缘和节点,然后重新绘制图形,但这不是正确的方法,因为它重新绘制图形并更改布局(即刷新 canvas).
我该如何解决这个问题?
//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
使用选择器解决了这个问题。 cytoscape.js 的文档非常缺乏。对于以后遇到此问题的任何人,我是这样做的:
this.cy.remove('edge[source=\'' + nodeId + '\']');
this.cy.remove('edge[target=\'' + nodeId + '\']');
this.cy.remove('#' + nodeId);
给定 cytoscape.js 中的一个节点,我试图删除该节点和该节点的所有定向(进出)边。为此,我编写了一些快速而肮脏的过滤器,但调用 cy.remove(edges);
会向控制台打印一条 'no such method exists' 错误消息。通过相同的方法删除节点效果很好,但会删除连接到已删除节点的所有节点,在我的例子中,这就是整个图(大多数情况下)。所以我尝试从我的数据源中删除边缘和节点,然后重新绘制图形,但这不是正确的方法,因为它重新绘制图形并更改布局(即刷新 canvas).
我该如何解决这个问题?
//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
使用选择器解决了这个问题。 cytoscape.js 的文档非常缺乏。对于以后遇到此问题的任何人,我是这样做的:
this.cy.remove('edge[source=\'' + nodeId + '\']');
this.cy.remove('edge[target=\'' + nodeId + '\']');
this.cy.remove('#' + nodeId);