如何在 Cytoscape.js 中制作加权图?
How to make a weighted graph in 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)'
作为边缘来显示权重 属性 作为边缘的标签。您还可以调整此标签的样式,详见 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>
我是 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)'
作为边缘来显示权重 属性 作为边缘的标签。您还可以调整此标签的样式,详见 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>