3

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

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

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

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

4

1 回答 1

3

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

在此处输入图像描述

然后此代码将圆圈添加到知道它的 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 新手,使用风险自负

于 2015-01-07T11:21:10.330 回答