cytoscape.js中的动态节点内容（标签）

Question

I have node labels mapped to the node "name" property, and I need the label to update on the cy canvas when the name is changed. I've been using the 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 a node

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

and updating the node with

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

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

Edit I don't know why that doesn't work, but for anyone else having this problem, for the time being I'm using eles.flashClass() to very briefly remove the node label for the node. When the temporary class is removed, the correct label is rendered. Eg

in the css style set on init

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

then to rename a node

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

This works but it doesn't seem like it should be necessary, I'd really like to know why

content: 'data(name)'

isn't working - I don't know if it's a bug or I'm doing something wrong, only that it works below version 2.3.0

Answer 1

Please follow this ticket: https://github.com/cytoscape/cytoscape.js/issues/678

From the ticket:

This is probably due to the performance enhancements on style for 2.3. Now, instead of style being applied cumulatively, a highly performant diff of matching selector contexts is done. And only the properties that need to be applied as a result of the diff are applied. I suspect that because the matching contexts are the same etc, the style is not updated.

Answer 2

I'm not really sure about the quality of my solution, and if it is what you were looking for, but I did this (version >=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();
        });

I didn't declare an init 'content'-property in cytoscape style

hope this helps

Answer 3

This was added in version 2.5.0, see this ticket: https://github.com/cytoscape/cytoscape.js/issues/1041

To use it, set 'width': 'label' , and to get extra space around the text use the padding property, for example 'padding': 5 for 5 pixels.