本文介绍了vis.js简单示例:边缘不显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在研究一个基于vis.js的简单网络可视化示例.我有5个节点和6个边缘,它们存储在JSON文件中.边缘不显示,而在vis.js主页上给出的示例中显示.代码:
I working on a simple network visualization example based on vis.js. I have 5 nodes and 6 edges which I store in a JSON file. The edges do not show up, whereas they do in the examples given on the vis.js homepage. Code:
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);
浏览器中的输出:
如果您能向我提示我做错了事,我将非常高兴.
I'd be very happy if you have a hint for me what I am doing wrong.
推荐答案
OP在评论中给予了答复:
Answered by OP in comment:
这篇关于vis.js简单示例:边缘不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!