我正在我的网站上用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"
}
}],
},
}
我得到了可以显示的元素：
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>我遇到了同样的问题。
在我的例子中，cy的div的高度等于零，这意味着我什么也看不到。
我使用以下css样式修复了它：
html,
body {
height: 100%;
}
#cy {
width: 100%;
height: 90%;
}
关键的一点是确保html和body填充整个页面，因此div#cy将占据90%的屏幕空间，并且使用我们使用的任何布局都会出现图形。