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

Question

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

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

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

Answer 1

我能够通过创建两个 cytoscape 对象来解决这个问题。我正在将我所有的图表数据加载到我称为 allcy:

的变量中

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

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

然后我创建正常 "working" 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 添加其他节点，但我想我会设法做到这一点。希望它对某人有用。