Adding extra information above the node in cytoscape.js

Question

Using cytoscape.js to draw a graph. I need to add circle above the node at top-right position. After drawing the graph, is there any API wherein we can get positions of nodes.

Also, I have used the code as follows: elements : { nodes : [ { data : { id : '1', name : 'A' } } ] }

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

'#1' is the ID of the node in the data attribute. However, we are not able to add the node/circle at that exact position.

used cy.add() as an example to add the node at positions passed to it. — smita chougale, Jan 07 '15 at 06:41
so function `addRandomNode` receives absolute coordinates and you want to create a circle at that absolute position? and you think that the position calculated by `cy.nodes("#1").position('x')` and `cy.nodes("#1").position('x')` is incorrect? — xmojmr, Jan 07 '15 at 06:53
I want to create a circle above the node (i.e. Id=1). Getting position values in variables and passed it to the function, but as you see there is no output that showing added node anywhere inside the div. Using that position values how can I create the circle on node? — smita chougale, Jan 07 '15 at 08:15
I have done some minor modifications in the code, same positions captured by .position() are provided, now it is adding the node but not actually on the node I want. http://jsfiddle.net/ugyk1xya/6/ — smita chougale, Jan 07 '15 at 11:03

score 3 · Accepted Answer · edited May 23 '17 at 12:30

3

If you want to get something like:

enter image description here

then this code adds the circle to a node knowing it's 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');

but it must be called after the node's positions are known, when the layout settles down.

The locking is there to prevent that node and it's circle get apart.

jsFiddle demo: http://jsfiddle.net/xmojmr/wvznb9pf/

Using compound node which would keep the node and it's circle together would be probably better, once the support for positioning child nodes is implemented.

_{Disclaimer: I'm cytoscape.js newbie, use at your own risk}

edited May 23 '17 at 12:30

Community

1
1

answered Jan 07 '15 at 11:21

xmojmr

8,073
5
31
54

can we make circle on edges also? – smita chougale Jan 16 '15 at 05:00
1

@smitachougale in my answer the circle can be positioned anywhere. It only _appears_ to be above the node. You can position it e.g. in the middle of the edge using the [edge.source().position()](http://js.cytoscape.org/#collection/traversing/edge.source) and [edge.target().position()](http://js.cytoscape.org/#collection/traversing/edge.target) and [line midpoint formula](http://en.wikipedia.org/wiki/Midpoint). It should work for straight edges. For curved edges there may be some better way. Open new SO question to find out and keep watching https://github.com/cytoscape/cytoscape.js/issues/798 – xmojmr Jan 16 '15 at 07:56
How to use this cy.add() method to make circle on curved edge? – smita chougale Feb 17 '15 at 12:11
1

@smitachougale I have no idea how to approach it from the outside. Personally I'd try to plug it directly somehow/somewhere into the [CanvasRenderer.drawStyledEdge](https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js#L137-L215) where the curve coordinates are known. Doing it would require learning [some math](http://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/) like in [Stack Overflow: Quadratic Bezier Curve: Calculate Point](http://stackoverflow.com/questions/5634460/quadratic-bezier-curve-calculate-point) – xmojmr Feb 17 '15 at 12:37

Adding extra information above the node in cytoscape.js

1 Answers1