vis.js简单示例:边缘不显示 [英] vis.js simple example: edges do not show
问题描述
我正在研究一个基于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文档提到，可以导入gephi导出的JSON，这是我的起点.边缘由源"和目标"指示. Vis.js需要"from"和"to"关键字.更好地记录下这一点很好
the vis.js documentation mentions that one can import gephi-exported JSONs, which were my starting point. There edges are indicated by "source" and "target". Vis.js requires "from" and "to" keywords. It would be nice to document this a bit better
这篇关于vis.js简单示例:边缘不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
