cytoscape.js图的条件样式 [英] Conditionnal styles for cytoscape.js graph
问题描述
我想根据全局Javascript变量来更改图形的样式.例如，假设我的边缘具有 name 和 price 属性，我想使边缘的标签不同，这取决于全局 label_type 变量:
I want to change the style of my graph according to global Javascript variables. For exemple, assumung my edges got name and price attributes, I would like to make the labels of edges different, depending on a global label_type variable :
let lable_type = 'I_want_name_labels'
switch(lable_type) {
case 'I_want_name_labels':
cy.style().selector('edge').style({'label': 'data(name)'});
break;
case 'I_want_price_labels':
cy.style().selector('edge').style({'label': 'data(price)'});
break;
}
上面的代码根本不执行任何操作(不显示标签)，我真的不明白为什么.我的边缘具有以下结构:
The above code does not do anything at all (no label displayed), I do not really understand why. My edges have the following structure :
{
"data": {
"id": "node_node2",
"source": "node1",
"target": "node2",
"directed": true,
"name": "Baltazar",
"price": 1095.73
}
}
注意:我尝试改用 cy.filter('edge').style({'label':'data(name)'})，但随后 data 似乎无法通过这种方式访问，我收到此警告:
Note : I tried using cy.filter('edge').style({'label': 'data(name)'}) instead, but then data does not seems accessible this way, I got this warning :
The style property `label: data(name)` is invalid
那么，如何使用cytoscape.js获得条件样式?我在这里想念什么?
So, how to get conditionnal styling with cytoscape.js ? What am I missing here ?
推荐答案
以下是您要查找的行:
// .data() gets you all properties of the target element, .id() for example directly the id of the element
targetElement.style('label', targetElement.data('faveColor'));
这是有关如何初始化然后更改节点/边缘标签的有效演示:
Here is a working demo on how to initialize and then alter the nodes/edges label:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
"label": "data(id)",
"text-valign": "center",
"text-halign": "center",
"height": "60px",
"width": "100px",
"shape": "rectangle",
"background-color": "data(faveColor)"
}
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"control-point-step-size": 40,
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "Top",
faveColor: "#2763c4",
wants: "id"
}
},
{
data: {
id: "yes",
faveColor: "#37a32d",
wants: "id"
}
},
{
data: {
id: "no",
faveColor: "#2763c4",
wants: "id"
}
},
{
data: {
id: "Third",
faveColor: "#2763c4",
wants: "color"
}
},
{
data: {
id: "Fourth",
faveColor: "#56a9f7",
wants: "color"
}
}
],
edges: [{
data: {
source: "Top",
target: "yes"
}
},
{
data: {
source: "Top",
target: "no"
}
},
{
data: {
source: "no",
target: "Third"
}
},
{
data: {
source: "Third",
target: "Fourth"
}
},
{
data: {
source: "Fourth",
target: "Third"
}
}
]
},
layout: {
name: "dagre"
}
}));
cy.bind('click', 'node, edge', function(event) {
cy.nodes().each(function(ele, i, eles) {
ele.style('label', (ele.data('wants') == 'id') ? ele.data('id') : ele.data('faveColor'));
});
});body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 85%;
width: 100%;
float: right;
position: absolute;
}<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
</script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>这篇关于cytoscape.js图的条件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
