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

Question

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

另外，我使用的代码如下：                        要素：{                 节点：[{                     数据：{                         id：＆＃39; 1＆＃39;，                         名称：＆＃39; A＆＃39;                            }                             }                                          ]                                     }

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

＆＃39;＃1＆＃39;是数据属性中节点的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/

一旦support for positioning child nodes被实现，使用复合节点可以更好地保持节点及其圈在一起。

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