cytoscape.js - 在 cytoscape.js 中的节点上方添加额外信息

Question

使用 cytoscape.js 绘制图形。我需要在右上角的节点上方添加圆圈。绘制图表后，是否有任何 API 可以让我们获取节点的位置。

另外，我使用的代码如下：元素：{节点：[{数据：{id：'1'，名称：'A'}}]}

var pos = cy.nodes("#1").position();

'#1' 是数据属性中节点的 ID。但是，我们无法在该确切位置添加节点/圆。

Answer 1

如果你想得到类似的东西：

然后此代码将圆圈添加到知道它的 id 的节点：

function addCircle(nodeId, circleText){
    var parentNode = cy.$('#' + nodeId);
    if (parentNode.data('isCircle') || parentNode.data('circleId'))
        return;
    parentNode.lock();
    var px = parentNode.position('x') + 10;
    var py = parentNode.position('y') - 10;    
    var circleId = (cy.nodes().size() + 1).toString();
    parentNode.data('circleId', circleId);
    cy.add({
        group: 'nodes',
        data: { weight: 75, id: circleId, name: circleText, isCircle: true },
        position: { x: px, y: py },
        locked: true
    }).css({
        'background-color': 'yellow',
        'shape': 'ellipse',
        'background-opacity': 0.5
    }).unselectify();
}

// ...

addCircle('1', 'Bubble A');

但它必须在节点的位置已知后，当布局稳定时调用。

锁定是为了防止该节点和它的圆圈分开。

jsFiddle 演示：http: //jsfiddle.net/xmojmr/wvznb9pf/

一旦实现了对定位子节点的支持，使用将节点和它的圆圈保持在一起的复合节点可能会更好。

_{免责声明：我是 cytoscape.js 新手，使用风险自负}