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

dynamic node content (label) in cytoscape.js

本文关键字：标签 节点 js 动态 cytoscape      更新时间：2023-09-26

我有映射到节点"name"属性的节点标签，当名称更改时，我需要在cy画布上更新标签。我一直在使用

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

和一个节点

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

并用更新节点

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

使用2.2.10，节点标签（内容）在画布上按预期进行更新。自从升级到2.3.1版本后，这就不再有效了。任何关于如何再次实现这一目标的建议都将不胜感激！

编辑我不知道为什么这不起作用，但对于其他有这个问题的人来说，目前我正在使用eles.flashClass（）来非常简短地删除节点的节点标签。删除临时类后，将呈现正确的标签。例如

在init 上设置的css样式中

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

然后重命名节点

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

这是有效的，但似乎没有必要，我真的很想知道为什么

content: 'data(name)'

不起作用-我不知道这是一个错误还是我做错了什么，只知道它在2.3.0版本下起作用

请遵循此票证：https://github.com/cytoscape/cytoscape.js/issues/678

从票上看：

这可能是由于样式2.3的性能增强。现在，不再累积应用样式，而是进行了匹配选择器上下文的高性能差异。并且只应用由于diff而需要应用的属性。我怀疑，因为匹配的上下文是相同的等等，所以样式没有更新。

我真的不确定我的解决方案的质量，也不确定它是否是你想要的，但我做到了（版本>=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();
        });

我没有在cytoscape风格的中声明init‘content’属性

希望这对有帮助

这是在2.5.0版本中添加的，请参阅此票证：https://github.com/cytoscape/cytoscape.js/issues/1041

若要使用它，请设置'width': 'label'，若要在文本周围获得额外空间，请使用padding属性，例如'padding': 5表示5个像素。

相关文章：