bounty将在6天后过期。回答此问题可获得+50的声望奖励。Natasha希望吸引更多人关注此问题:我已经在回答中提到的变化张贴工作,但我不能查看图表。请检查我的编辑。
我尝试使用cytoscape js创建并可视化图表
我有两个文件:
输入文件
index.html包含以下内容
<head>
<title>Tutorial 1: Getting Started</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
$.getJSON("input.js", function (data) {
var cy = cytoscape({
elements: data,
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}],
layout: {
name: 'grid'
},
});
});
</script>
</body>
input.js包括以下内容
[
// nodes
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f' } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'd'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
]
但是当我在浏览器中打开index.html时,只看到一个空文件。
谁能帮我一下吗?
编辑:我已经完成了下面答案中提到的变更https://github.com/DeepaMahm/misc/blob/master/index.htmlhttps://github.com/DeepaMahm/misc/blob/master/input.js
但我仍然无法通过打开index.html查看该图。
1条答案
按热度按时间afdcj2ne1#
实时代码,原始代码已修改和更正。您的
data
/结构不符合所需的规格。一旦更正,输出将显示。第一个