Geek Answers Handbook

Dynamic node content (label) in cytoscape.js

I have node labels mapped to the node "name" property, and I need the label to be updated on the cy canvas when the name changes. I used style

style: cytoscape.stylesheet()
.selector('node')
  .css({
    'color': '#000000',
    'content': 'data(name)',
    'text-valign': 'center',
    'background-color': '#FFFFFF',
    'border-width': 1,
    'border-color': '#707070'
  })

and node

cy.add(
    { group: "nodes", data: { id: "n0", name: 'name' }, position: { x: 100, y: 100 } }
);

and updating node with

cy.$('#n0').data('name', 'newName')

Using 2.2.10, the label (content) of the node is updated on the canvas as expected. Since upgrading to version 2.3.1, this no longer works. Any suggestions on how to achieve this again will be greatly appreciated!

Edit I do not know why this does not work, but for those who have this problem, so far I am using eles.flashClass () to remove the node label for node very briefly. When the temporary class is deleted, the correct label is displayed. For instance.

in css style set to init

.selector('node.nolabel')
    .css({
        'content': ''
})

then rename a node

cy.$('#n0').data('name', 'newName').flashClass('nolabel',1) //class applied for 1ms then removed

, , , ,

content: 'data(name)'

- , , - , , 2.3.0

+4
3

, : https://github.com/cytoscape/cytoscape.js/issues/678

:

, , 2.3. , , , . , diff. , , .., .

+1

, , , ( >= 2.5)

cy.nodes([filter]).on('eventname').css({content:[newLabelvalue]})
example: 
var node = cy.$([selector]);
node.on('grab', function () {
            var field = $("input[id="+ nodeId + "]");
            this.css({content: field.val()});
            field.hide();
        });

init 'content' cytoscape

,

+1

2.5.0, . : https://github.com/cytoscape/cytoscape.js/issues/1041

, 'width': 'label', , padding, 'padding': 5 5 .

+1

More articles:


All Articles