如何在渲染之前操纵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,
});

请注意，它无头，所以它不会尝试以任何方式渲染节点。

然后我正在创造正常的＆＃34;工作＆＃34; 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中的其他节点，但我想我会设法做到这一点。希望它对某人派上用场。