我正在研究一个基于 vis.js 的简单网络可视化示例。我有 5 个节点和 6 个边存储在 JSON 文件中。边缘不显示，而它们在 vis.js 主页上给出的示例中显示。代码：
HTML 文件：
<!doctype html>
<html>
<head>
<title>Cryring Topology</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="vis.js"></script>
<link href="vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 1200px;
height:1200px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Visualization nof the Cryring Topology
</p>
<div id="mynetwork"></div>
<!-- this adds an invisible <div> element to the document to hold the JSON data -->
<div id="networkJSON-results" class="results" style="display:none"></div>
<script src="graphPlotVis.js" type="text/javascript"></script>
</body>
JSON 文件：
{"nodes":[
{"id":"a", "label":"a"},
{"id":"b", "label":"b"},
{"id":"c", "label":"c"},
{"id":"d", "label":"d"},
{"id":"e", "label":"e"},
{"id":"f", "label":"f"}
],
"edges":[
{"source":"a","target":"b"},
{"source":"b","target":"d"},
{"source":"a","target":"c"},
{"source":"c","target":"d"},
{"source":"d","target":"e"},
{"source":"e","target":"a"},
{"source":"f","target":"c"}
]
}
JAVASCRIPT 文件：
$.ajax({
async: false,
url: 'cryringTopo.json',
dataType: "json",
success: function(data) {
$('#networkJSON-results').html(JSON.stringify(data));
}
});
var gephiJsonDOM = document.getElementById('networkJSON-results');
if (gephiJsonDOM.firstChild == null) {
window.alert('Error loading network file.')
}
var gephiJSON = JSON.parse(gephiJsonDOM.firstChild.data);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: gephiJSON.nodes,
edges: gephiJSON.edges
};
var options = {};
var network = new vis.Network(container, data, options);
在浏览器中输出：
如果你能提示我我做错了什么，我会很高兴。