cytoscape.js의 노드 위에 추가 정보 추가

Question

cytoscape.js를 사용하여 그래프를 그립니다. 노드 오른쪽 위에 원을 추가해야합니다. 그래프를 그린 후에 노드의 위치를 ​​얻을 수있는 API가 있습니까? 요소 : 다음

또한

는 I 코드를 사용한 { 노드 : [{ 데이터 { 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/

사용하여 화합물 노드 노드를 유지하고는 support for positioning child nodes이 구현되면, 아마 더 좋을 것이다 함께 원입니다 것입니다.

_{면책 조항 : 나는, cytoscape.js 초보자를 해요 당신이 당신의 시도와 http://jsfiddle.net/를 제공 할 책임은}