vue中使⽤cytoscape.js⽀持边的颜⾊⾃定义如下：根据类型定义边的颜⾊
1.定义边的样式edge定义多组selector样式根据指定的type值匹配
< = cytoscape({
container: ElementById('photo'),                layout:{
fit: false,
name:'concentric',//这是控制图形形状的
padding: 30, // the padding on fit
animate: false,
minNodeSpacing: 80,//控制⼤⼩
maxNodeSpacing: 120,//控制⼤⼩
},
style: [{selector: 'node',
css:{
'curve-style':'bezier',
'label':'data(nodename)',
'background-image':'data(color)',
'background-fit':'cover',
'color':'data(textColor)',
'width': 40,
'height': 40,
// 'font-size':14
}
},
{selector: 'edge',
css:{
'curve-style':'bezier',
'label':'data(percentum)',
nodeselector'width': 1,
'line-color': lor,
//'font-size':14
}
},
{
selector: 'edge[type="default"]',
style:{
'line-color':'green',
'target-arrow-color':'green',
}
},
{
selector: 'edge[type="yes"]',
style:{
'line-color':'#000',
'target-arrow-color':'#000',
}
},
{
selector: 'edge[type="no"]',
style:{
'line-color':'#ED1000',
'target-arrow-color':'#ED1000',
}
},
],
elements:{
nodes: dataA,
edges: dataB
}
});
2。然后在添加节点边数据时，在边的数组循环遍历时加上type值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。