将“content”属性重置为null,以用于cytoscape节点

时间:2018-01-06 05:52:11

标签: cytoscape.js

所以我发现如果我将节点的内容属性初始化为任何非空值,我就无法将其重置为null。事实上,我甚至无法将其设置为空字符串,甚至只是空格。

最简单的例子:

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'的单个节点,并匹配其name属性。现在,让我们尝试重置它:

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

这样可以正常工作,因此可以使用.css调用更改属性。最初将content属性设置为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对象之后发生,因为可能有许多图标集可由用户选择。

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

1 个答案:

答案 0 :(得分: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''这样的空覆盖值只会删除覆盖本身 - 从而回退到样式表指定的内容。这些都在文档中提到:

  

您应该非常谨慎地使用此函数进行设置,因为它会覆盖元素的样式,尽管它具有状态和类。通常,最好在初始化时指定一个更好的样式表来反映您的应用程序状态,而不是以编程方式修改样式。

     

仅支持定义的视觉样式属性。

     

如果要删除特定的重写样式属性,请设置null或'' (空字符串)到它。

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