如何在渲染之前操作 cytoscape.js 图形数据

How to manipulate cytoscape.js graph data before rendering

本文关键字：cytoscape 操作 js 图形 数据      更新时间：2023-09-26

我有相对大量的图形数据（超过1000个节点，超过2000条边）。Cytoscape.js无法呈现如此大量的数据，所以我决定做一些交互式图形探索。我想从图根（它是 DAG）开始，用户在单击节点后将能够探索它们。

我知道我可以在 cytoscape.js 之外做到这一点，但我想知道我是否可以创建一个我将操作的节点/边缘集合（删除除根及其邻居之外的所有节点），然后用作数据源（获取节点的子节点）。Cytoscape使图形处理变得非常容易，如果不需要重新发明轮子，那就太好了。

我

尝试根据我提供给图形的 JSON 数据创建 cy.collection，但它似乎不接受与 cy.load 相同的数据格式。

我能够通过创建两个细胞景观对象来解决这个问题。我正在将所有图形数据加载到我调用的变量中allcy：

var allcy = cytoscape({
    headless: true,
});

请注意，它是无头的，因此它不会尝试以任何方式呈现节点。

然后我正在创建正常的"工作"cy var

var cy = cytoscape({
    container: document.getElementById('thegraph'),
});

我将所有数据加载到allcy 

    allcy.load(response); //response is json graph data I got from xmlhttp request

我将根和它们的邻居添加到cy并重新加载布局。

    cy.add(allcy.nodes().roots().closedNeighborhood());
    cy.layout(layoutSettings);

瞧！我在渲染的cy图中只有根节点。现在我需要根据需要从allcy添加其他节点，但我想我会设法做到这一点。希望它对某人派上用场。

相关文章：