与元素相关联的数据 属性 上的选择器
Selector on property of data associated with a element
我正在尝试使用选择器根据与节点关联的数据过滤 cytoscape.js 中的节点。
我似乎无法过滤作为数据添加到节点的 属性 的 "sub"-属性 数据。
cy.nodes("[type = 'typeA']") - works
cy.nodes("[metadata.type = 'typeA']") - fails
我试过转义“\\”。但一直无法让它发挥作用。
{
"data": {
"id": "run-jmh",
"metadata": {
"type": "typeA",
}
"type": "typeA",
},
"position": {
"x": 550,
"y": 23
},
"group": "nodes",
"removed": false,
"selected": false,
...
}
选择器字符串不支持任意 JS 语法,所以像 foo.bar
或 foo['bar']
这样的东西是行不通的。选择器实际上仅用于简单的顶级数据字段,类似于您在 HTML.
中对属性使用选择器的方式
如果您需要更复杂、任意的逻辑,您可以使用函数来设置样式 属性 值,例如:
cytoscape({
container: document.getElementById('cy'),
// ...
style: cytoscape.stylesheet()
.selector('node')
.style({
'background-color': function( ele ){ return ele.data('bg') }
// which works the same as
// 'background-color': 'data(bg)'
})
// ...
// , ...
});
参考:http://js.cytoscape.org/#style/format
在这种情况下,您将在函数中将元素分类为匹配或不匹配等,以及像 node
.
这样的通用选择器
我正在尝试使用选择器根据与节点关联的数据过滤 cytoscape.js 中的节点。
我似乎无法过滤作为数据添加到节点的 属性 的 "sub"-属性 数据。
cy.nodes("[type = 'typeA']") - works
cy.nodes("[metadata.type = 'typeA']") - fails
我试过转义“\\”。但一直无法让它发挥作用。
{
"data": {
"id": "run-jmh",
"metadata": {
"type": "typeA",
}
"type": "typeA",
},
"position": {
"x": 550,
"y": 23
},
"group": "nodes",
"removed": false,
"selected": false,
...
}
选择器字符串不支持任意 JS 语法,所以像 foo.bar
或 foo['bar']
这样的东西是行不通的。选择器实际上仅用于简单的顶级数据字段,类似于您在 HTML.
如果您需要更复杂、任意的逻辑,您可以使用函数来设置样式 属性 值,例如:
cytoscape({
container: document.getElementById('cy'),
// ...
style: cytoscape.stylesheet()
.selector('node')
.style({
'background-color': function( ele ){ return ele.data('bg') }
// which works the same as
// 'background-color': 'data(bg)'
})
// ...
// , ...
});
参考:http://js.cytoscape.org/#style/format
在这种情况下,您将在函数中将元素分类为匹配或不匹配等,以及像 node
.