cytoscape.js 图,仅显示/绘制少数节点和边缘
Posted
技术标签:
【中文标题】cytoscape.js 图,仅显示/绘制少数节点和边缘【英文标题】:cytoscape.js graph, shows/draws only with few nodes and edges 【发布时间】:2020-04-01 08:20:26 【问题描述】:我正在我的网站上使用 Cytoscape.js 创建一个图表,以向管理员显示用户之间的联系。一切都很好,但有些图表没有画下来。控制台中没有错误,但画布似乎是空的。
例如,未绘制的图形有 20 个边和 18 个节点。 如果我删除一些边,则绘制并显示图形。无论我删除哪个节点或边缘:如果我达到 18 个边缘,它就会显示。所以我想“也许它太大了”。
但实际上我有更大的图(37 条边),绘制起来没有问题。
可能是什么问题?
这是一个没有显示的图表。顺便问一下,有没有可以测试这种结构的在线网站?谢谢
"elements":
"nodes": [
"data": "id": "1",
"data": "id": "2",
"data": "id": "3",
"data": "id": "4",
"data": "id": "5",
"data": "id": "6",
"data": "id": "7",
"data": "id": "8",
"data": "id": "9",
"data": "id": "10",
"data": "id": "11",
"data": "id": "12",
"data": "id": "13",
"data": "id": "14",
"data": "id": "18",
"data": "id": "15",
"data": "id": "16",
"data": "id": "17"
],
"edges": [
"data":
"source": "1",
"target": "2"
,
"data":
"source": "1",
"target": "3"
,
"data":
"source": "4",
"target": "3"
,
"data":
"source": "5",
"target": "3"
,
"data":
"source": "1",
"target": "6"
,
"data":
"source": "7",
"target": "6"
,
"data":
"source": "1",
"target": "8"
,
"data":
"source": "9",
"target": "1"
,
"data":
"source": "1",
"target": "9"
,
"data":
"source": "1",
"target": "10"
,
"data":
"source": "4",
"target": "10"
,
"data":
"source": "1",
"target": "11"
,
"data":
"source": "1",
"target": "4"
,
"data":
"source": "8",
"target": "12"
,
"data":
"source": "14",
"target": "13"
,
"data":
"source": "8",
"target": "13"
,
"data":
"source": "15",
"target": "18"
,
"data":
"source": "11",
"target": "18"
,
"data":
"source": "11",
"target": "16"
,
"data":
"source": "17",
"target": "16"
],
,
【问题讨论】:
您使用的是什么布局?我用 dagre 和 grid 试了一下,节点显示出来了? ` 布局:名称:'breadthfirst',定向:true,填充:15` 在线站点测试“这种结构”是什么意思? 【参考方案1】:我让元素显示得很好:
var cy = window.cy = cytoscape(
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [
selector: 'node',
css:
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
,
selector: '$node > node',
css:
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
,
selector: 'edge',
css:
'target-arrow-shape': 'triangle'
,
selector: ':selected',
css:
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
],
elements:
nodes: [
data:
id: "1"
,
data:
id: "2"
,
data:
id: "3"
,
data:
id: "4"
,
data:
id: "5"
,
data:
id: "6"
,
data:
id: "7"
,
data:
id: "8"
,
data:
id: "9"
,
data:
id: "10"
,
data:
id: "11"
,
data:
id: "12"
,
data:
id: "13"
,
data:
id: "14"
,
data:
id: "15"
,
data:
id: "16"
,
data:
id: "17"
,
data:
id: "18"
],
edges: [
data:
source: "1",
target: "2"
,
data:
source: "1",
target: "3"
,
data:
source: "4",
target: "3"
,
data:
source: "5",
target: "3"
,
data:
source: "1",
target: "6"
,
data:
source: "7",
target: "6"
,
data:
source: "1",
target: "8"
,
data:
source: "9",
target: "1"
,
data:
source: "1",
target: "9"
,
data:
source: "1",
target: "10"
,
data:
source: "4",
target: "10"
,
data:
source: "1",
target: "11"
,
data:
source: "1",
target: "4"
,
data:
source: "8",
target: "12"
,
data:
source: "14",
target: "13"
,
data:
source: "8",
target: "13"
,
data:
source: "15",
target: "18"
,
data:
source: "11",
target: "18"
,
data:
source: "11",
target: "16"
,
data:
source: "17",
target: "16"
]
,
layout:
name: 'breadthfirst',
directed: true,
padding: 15
);
body
font: 14px helvetica neue, helvetica, arial, sans-serif;
#cy
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
float: left;
<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://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
【讨论】:
我发现没有directed:true
也适用于我。无论如何,您的也可以使用该属性。嗯……
您可以发布您的代码的最小版本(html、css 和 js),这样我们就可以准确找出问题所在以上是关于cytoscape.js 图,仅显示/绘制少数节点和边缘的主要内容,如果未能解决你的问题,请参考以下文章
带有固定节点的 Javascript cytoscape.js 自动布局
在 cytoscape.js "on('unselect')" 事件中查找选定的节点/边缘