时间戳

首页 > 解决方案 > 哪个布局最适合 cytoscape.js？

cytoscape.js - 哪个布局最适合 cytoscape.js？

问题描述

我们现在正在分析 cytoscape.js 的需求，我们希望了解http://js.cytoscape.org/#extensions/layout-extensions中的哪个布局扩展对我们有好处。任何人都可以帮助/指导我们选择布局吗？

我们正在考虑根据用例拥有多个布局，但是对于每个布局，我们总是希望具有快速图形渲染的高性能。

用例：-

1）我们希望在最大级别显示 20,000 个交互（边）和可能的 40,000 个交互器（节点），如果对于任何布局都无法处理，我们可以减少它。

“cise”和“fcose”可以吗？

2）如果显示少量节点/边，图形应该在视口中展开，利用任何空白空间，我认为我们需要自己这样做，但以防万一它开箱即用。

“传播”可以吗？

3) 非交叉边缘。

“ngraph.forcelayout”可以吗？

4）我们需要一个功能，其中边有父子关系，这样当用户点击父边时，子边就会出现，反之亦然。

哪种布局最适合这个用例？

标签： cytoscape.js

解决方案

哪种布局扩展最好在很大程度上取决于您要可视化的图形类型。您可能需要尝试一些，看看哪种效果最好。

对于 DAG，最好的（根据我的经验）布局是Dagre。

依赖项：

    <script src="lib/cyjs/cytoscape.min.js"></script>
    <script src="lib/cyjs/dagre.js"></script>
    <script src="lib/cyjs/cytoscape-dagre.js"></script>

配置：

layout: {
    name: 'dagre',
    rankDir: 'LR',
}

对于自动缩放，您将在实例上使用.fit()方法。cytoscape

let cy = cytoscape(options);
...
cy.fit(cy.elements());

更一般地，.elements(), .nodes(), .edges(),.$()可用于获取可用于显示/隐藏、选择/取消选择和适合的图形元素的集合。集合还支持各种图形导航功能，如扇入/扇出树，可用于获得非常令人愉悦的图形探索 UI。

为了体验集合 API，突出显示所选节点的扇入 + 扇出树将类似于

let n = cy.$('node:selected');
if (n != null) {
    // find elements to be displayed
    let ns = n
        .predecessors()
        .union(n)
        .union(n.predecessors().union(n).successors());

    // display them
    ns.style("display", "element");

    // hide the rest of the graph
    cy
        .elements()
        .not(ns)
        .style("display", "none");

    // fit the view port to the displayed elements
    cy
        .fit(ns.union(ns.incomers())
        .union(ns.outgoers()));
}

推荐阅读