将 cytoscape 节点的 'content' 属性重置为 null

Question

所以我发现如果我已经将一个节点的内容属性初始化为任何非空值，我不能将它重置为空。事实上，我什至不能将它设置为空字符串甚至只是空格。

最简单的例子：

cytest = cytoscape({
    container : document.getElementById('cy'), 
    elements : {
        nodes : [{data : {id : 'test', name : 'test'}}]
    }, 
    style : cytoscape.stylesheet().selector('node')
        .css({
            content : 'data(name)', 
            'text-valign' : 'center'
        })
})

这样就创建了一个带有标签 'test' 的节点，与其名称属性相匹配。现在，让我们尝试重置它：

cytest.$('#test').css({'content' : 'hello'})

这很好用，所以属性可以通过调用 .css 来改变。最初将内容属性设置为 null 也有效：

cytest = cytoscape({
    container : document.getElementById('cy'), 
    elements : {
        nodes : [{data : {id : 'test', name : 'test'}}]
    }, 
    style : cytoscape.stylesheet().selector('node')
        .css({
            content : null, 
            'text-valign' : 'center'
        })
})

所以我们可以将属性设置为null，也可以在设置后更改属性。然而，我们不能两者兼顾。我们不能将其更改为 null。以下不起作用：

cytest.$('#test').css({'content' : null})

有趣的是，这些也不是：

cytest.$('#test').css({'content' : ''})
cytest.$('#test').css({'content' : ' '})

所以我正在尝试找到一种方法来做到这一点。

所有这一切的目的，如果重要的话，是我尝试加载图像以用作背景图像（这很好用）。但是，如果图像存在，我需要删除文本内容，如果不存在，则保留名称。这必须在初始化 cytoscape 对象之后发生，因为可能有许多图标集可供用户选择。

所以寻找任何关于为什么它不起作用或我如何能够完成我需要的提示。没有粘贴我的实际代码，因为它很庞大，而这只是其中的一部分。

Answer 1

您指定了一个映射：label : 'data(name)'。所以标签是节点数据中的 name 字段。然后设置 node.data('name', '') 即可清除标签。或者您可以在样式表中使用更高优先级（即稍后）的样式块，例如

.selector('node.no-label')
  .style({ 'label': '' })

并且：

node.addClass('no-label');

或者使用函数：

.selector('node.no-label')
  .style({ 'label': n => n.data('isLabelShown') ? n.data('name') : '' })

如果您使用 node.style() 绕过样式，那么您将覆盖样式属性。像 null 或 '' 这样的空覆盖值只会删除覆盖本身——从而退回到样式表指定的内容。这些都在文档中提到：

You should use this function very sparingly for setting, because it overrides the style of an element, despite the state and classes that it has. In general, it’s much better to specify a better stylesheet at initialisation that reflects your application state rather than programmatically modifying style.

Only defined visual style properties are supported.

If you would like to remove a particular overridden style property, set null or '' (the empty string) to it.

http://js.cytoscape.org/#eles.style

将 cytoscape 节点的 'content' 属性重置为 null

Reset 'content' property to null for a cytoscape node

cytoscape.js

将 cytoscape 节点的 'content' 属性 重置为 null

Reset 'content' property to null for a cytoscape node

cytoscape.js

将 cytoscape 节点的 'content' 属性重置为 null