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

Question

使用cytoscape.js绘制图表。我需要在右上角的节点上方添加圆圈。画好图后，有没有API可以得到节点的位置

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

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

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

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 新手，使用风险自负}

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

Adding extra information above the node in cytoscape.js

cytoscape-web

cytoscape.js