时间戳

首页 > 解决方案 > 在 Cytoscape.js 中设置节点位置

javascript - 在 Cytoscape.js 中设置节点位置

问题描述

我正在使用出色的Cytoscape.js进行绘图。

我以前一直在为此使用可乐选项，因为它使用力方向。

然而，我现在想可视化多个没有连接的图表，并意识到fCose在这方面做得更好。

我现在面临的问题是，当我已经有坐标可以设置节点位置时，我现在无法设置节点位置。

我可以Cola通过在布局选项中执行以下操作来实现这一点 -

    name: 'cola',
    padding: layoutPadding,
    nodeSpacing: 40,
    edgeLengthVal: 20,
    animate: false,              // setting this to false
    randomize: false,            // and this to false allowed me to manually set the node position coordinates
    maxSimulationTime: maxLayoutDuration,
    boundingBox: { 
        x1: 0,
        y1: 0,
        x2: 10000,
        y2: 10000
    },
    edgeLength: function (e) {
        let w = e.data('weight');
        return w;
    }

同样在默认值中Cola positions设置为undefined，我假设这意味着如果传入坐标，它们将被相应地设置。

但是我的问题在于fCose，无论我做什么，当传递节点的坐标时，渲染时的影响为零。

在fCose我看到三个变量的默认值中，我认为如果我改变了会产生影响 -

    quality: "default",
    // Use random node positions at beginning of layout
    // if this is set to false, then quality option must be "proof"
    randomize: true,
    // Whether or not to animate the layout
    animate: true,

所以我设置quality为“证明”和两者randomize和animate。false

我也尝试添加positions: undefined，但是上述更改都没有对节点定位产生任何影响。我怎样才能做到这一点fCose？

标签： javascriptcytoscape.js

解决方案

在 fCoSE 中，如果 randomize 为真，则节点最初会散布到随机位置，然后算法会尝试找到图的良好布局。

如果 randomize 为 false，则算法从节点的当前位置开始。从当前位置开始，我的意思是在每个 cytoscape 节点中找到的位置属性。如果要从所需位置开始布局，首先需要使用node.position()or将这些位置分配给节点nodes.positions()，然后使用 randomize: false 开始布局。否则，布局当前不直接接受初始位置。

推荐阅读