我使用类名来区分不同的节点类型,但是cytoscapeJS始终使用元素列表中遇到的第一个类名。
这是我的元素数组:
[{
"group": "nodes",
"data": {
"id": 2,
"label": "users-iphone"
},
"classes": ["client"],
"selected": false,
"selectable": false,
"locked": false,
"grabbable": false
}, {
"group": "nodes",
"data": {
"id": 3,
"label": "FLOOR-01-N"
},
"classes": ["ap"],
"selected": false,
"selectable": false,
"locked": false,
"grabbable": false
}, {
"group": "nodes",
"data": {
"id": 4,
"label": "FLOOR-01-SW"
},
"classes": ["switch"],
"selected": false,
"selectable": false,
"locked": false,
"grabbable": false
}, {
"group": "nodes",
"data": {
"id": 5,
"label": "MAIN-ROUTER"
},
"classes": ["router"],
"selected": false,
"selectable": false,
"locked": false,
"grabbable": false
}]
和样式表:(变量在运行时被替换)
node.client {
border-color: ${colorClient};
background-image: url('images/client.svg');
}
node.ap {
border-color: ${colorAp};
background-image: url('images/ap.svg');
};
node.switch {
border-color: ${colorSwitch};
background-image: url('images/switch.svg');
}
node.router {
border-color: ${colorRouter};
background-image: url('images/router.svg');
}
渲染后,所有节点都具有'node.client'的样式。
我尝试将样式表的原始JSON和'string'格式都使用。