使用 cytoscape.js 绘制图形。我需要在右上角的节点上方添加圆圈。绘制图表后,是否有任何 API 可以让我们获取节点的位置。
另外,我使用的代码如下:元素:{节点:[{数据:{id:'1',名称:'A'}}]}
var pos = cy.nodes("#1").position();
'#1' 是数据属性中节点的 ID。但是,我们无法在该确切位置添加节点/圆。
使用 cytoscape.js 绘制图形。我需要在右上角的节点上方添加圆圈。绘制图表后,是否有任何 API 可以让我们获取节点的位置。
另外,我使用的代码如下:元素:{节点:[{数据:{id:'1',名称:'A'}}]}
var pos = cy.nodes("#1").position();
'#1' 是数据属性中节点的 ID。但是,我们无法在该确切位置添加节点/圆。
如果你想得到类似的东西:
然后此代码将圆圈添加到知道它的 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 新手,使用风险自负