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

Question

我有相对大量的图数据(超过1000个节点，超过2000条边)。 Cytoscape.js 无法渲染这么多数据，因此我决定进行一些交互式图形探索。我想从图根(它是 DAG)开始，用户单击节点后将能够探索节点。

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

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

Answer 1

我可以通过创建两个 cytoscape 对象来解决这个问题。我正在将所有图形数据加载到名为 allcy 的变量中:

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

请注意，它是 headless 的，因此它不会尝试以任何方式渲染节点。

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