Is there a way to display a node label at the top inside the node?
Question
I am creating a graph using cytoscape.js and I have compounded nodes which are inside the parent node. I would like to have the title of the main/parent node at the top of the node but inside the node. Is that possible in cytoscape?
I have tried using using halign and valign. Whenever I use top value, it shows outside the box.
Is there a extension or a plugin that lets us do it?
Example with child node: https://stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts
2 answers
solution1
5 2021-06-25 08:46:03
As you can read here , you can only place labels inside a node with the center option, a good configuration (label inside at the top) requires a margin to be added to your label:
.selector(':parent')
.css({
'text-valign': 'center',
// the next line moves the parents label up to the top of the node and 5px down to create a padding
'text-margin-y': function (node) { return -node.height() + 5 }
})
Here is a working example:
var cy = cytoscape({ container: document.getElementById('cy'), style: cytoscape.stylesheet() .selector(':parent') .css({ 'text-valign': 'center', 'text-margin-y': function(node) { return -node.height() + 5 } }) .selector('node') .css({ 'height': 'data(size)', 'width': 'data(size)', 'border-color': '#000', 'border-width': '1', 'content': 'data(name)' }) .selector('edge') .css({ 'width': 'data(strength)' }) .selector('#1') .css({ 'background-color': 'red' }) .selector('#4') .css({ 'background-color': 'green' }), elements: { nodes: [{ data: { id: '1', size: 50, name: 'a' } }, { data: { id: '2', size: 20, name: 'b', parent: '1' } }, { data: { id: '3', size: 40, name: 'c', parent: '1' } }, { data: { id: '4', size: 50, name: 'd' } }, { data: { id: '5', size: 20, name: 'e', parent: '4' } }, { data: { id: '6', size: 40, name: 'f', parent: '4' } } ], }, });
body { font: 14px helvetica neue, helvetica, arial, sans-serif; } #cy { height: 100%; width: 75%; position: absolute; left: 0; top: 0; float: left; }
<html> <head> <meta charset=utf-8 /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> </head> <body> <div id="cy"></div> </body> </html>
solution2
4 ACCPTED 2021-06-30 03:05:25
What I understand is that you want to put the parent label inside the box above child? apologies if I'm wrong
If so, My solution will be to add a padding and then apply margin for alignment.
Styles updated:
'padding-top':60
selector: 'node', css: { content: 'data(label)', 'text-valign': 'center', 'text-halign': 'center', 'font-size': 28, 'padding-top':60 }'text-valign': 'top', and ' text-margin-y': function(node) { return node.height() - 10; }
selector: 'node[type="parent"]', style: { shape: 'rectangle', 'background-color': 'grey', width: 300, height: 100, 'font-size': 25.5, 'font-family': 'Lato, Helvetica Neue, Helvetica, Arial, sans-serif', color: 'black', 'text-valign': 'top', 'text-halign': 'center', 'text-margin-y': function(node) { return node.height() - 10; } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.