如何解决如何在Cytoscape.js中制作加权图?
我是cytoscape的新手,我已经阅读了文档,但找不到有帮助的东西。有没有办法在Cytoscape.js中制作类似这样的东西(加权图)?:
我只需要知道如何显示边缘的重量。
到目前为止,我有这个:
elements: [
// list of graph elements to start with
{
// node a
data: { id: "a" },},{
// node b
data: { id: "b" },{
// edge ab
data: { id: "ab",weight: 3,source: "a",target: "b" },],
解决方法
您可以在CSS中为边缘使用'label': 'data(weight)'
,以将weight属性显示为边缘的标签。您还可以根据详细here来调整此标签的样式。我在以下示例中应用了其中两个(text-margin-y和text-orientation)。
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),layout: {name: 'grid',rows: 2},style: [{
selector: 'node',css: {
'content': 'data(id)','text-valign': 'center','text-halign': 'center'
}
},{
selector: 'edge',css: {
'label': 'data(weight)','text-margin-y': 15,'text-rotation': 'autorotate'
}
}
],elements: {
nodes: [{
data: {
id: 'n0'
}
},{
data: {
id: 'n1'
}
},{
data: {
id: 'n2'
}
},{
data: {
id: 'n3'
}
}
],edges: [{
data: {
id: 'n0n1',source: 'n0',target: 'n1',weight: 3
}
},{
data: {
id: 'n1n2',source: 'n1',target: 'n2',weight: 5
}
},{
data: {
id: 'n2n3',source: 'n2',target: 'n3',weight: 7
}
}
]
}
});
body {
font: 14px helvetica neue,helvetica,arial,sans-serif;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 0;
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.10.0/dist/cytoscape.min.js">
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。