【发布时间】：2019-11-21 07:15:11
【问题描述】：
我使用 vis.js 运行基本的 html 和 json 文件来可视化节点和链接。 Json 文件包含节点列表和链接/边。我在这里参考 SO 示例来运行它...example。我使用示例进行测试，它确实有效并显示了所有节点和链接。我用我自己的数据替换了 json 文件，当我执行代码时......它只显示没有任何链接的节点。
我的 Json 文件
{
"nodes": [
{
"id": "openflow:1",
"tpid": [
"openflow:1:2",
"openflow:1:1",
"openflow:1:LOCAL"
]
},
{
"id": "host:00:00:00:00:00:01",
"ip": "10.0.0.1",
"mac": "00:00:00:00:00:01",
"tpid": [
"host:00:00:00:00:00:01"
]
},
{
"id": "openflow:2",
"tpid": [
"openflow:2:LOCAL",
"openflow:2:1",
"openflow:2:2"
]
},
{
"id": "host:00:00:00:00:00:02",
"ip": "10.0.0.2",
"mac": "00:00:00:00:00:02",
"tpid": [
"host:00:00:00:00:00:02"
]
}
],
"edges": [
{
"id": "host:00:00:00:00:00:01/openflow:1:1",
"source": "host:00:00:00:00:00:01",
"target": "openflow:1:1"
},
{
"id": "openflow:2:1/host:00:00:00:00:00:02",
"source": "openflow:2:1",
"target": "host:00:00:00:00:00:02"
},
{
"id": "openflow:1:2",
"source": "openflow:1:2",
"target": "openflow:2:2"
},
{
"id": "openflow:2:2",
"source": "openflow:2:2",
"target": "openflow:1:2"
},
{
"id": "openflow:1:1/host:00:00:00:00:00:01",
"source": "openflow:1:1",
"target": "host:00:00:00:00:00:01"
},
{
"id": "host:00:00:00:00:00:02/openflow:2:1",
"source": "host:00:00:00:00:00:02",
"target": "openflow:2:1", "color":{"color":"green", "highlight":"blue"}, "arrows":{"target":{"scaleFactor":"1.25", "type":"circle"}}
}
]
}
这是html文件
i<!doctype html>
<HTML>
<HEAD>
<meta charset="utf-8" />
<TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE>
<!-- NPM (http://visjs.org/index.html#download_install): -->
<!-- <script type="text/javascript" src="node_modules/vis/dist/vis.min.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<!-- Needed for JSON file import (https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show): -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- http://visjs.org/index.html#download_install -->
<!-- <link rel="stylesheet" type="text/css" href="node_modules/vis/dist/vis.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<style type="text/css">
#mynetwork {
/* width: 600px; */
width: 100%;
height: 800px;
border: 2px solid lightgray;
}
</style>
</HEAD>
<BODY>
<div id="mynetwork"></div>
<!-- Add an invisible <div> element to the document, to hold the JSON data: -->
<div id="networkJSON-results" class="results" style="display:none"></div>
<script type="text/javascript">
// -------------------------------------------------------------------------
// OPTIONS:
// http://visjs.org/docs/network/#modules
// http://visjs.org/docs/network/edges.html#
// http://visjs.org/docs/network/physics.html#
var options = {
edges: {
arrows: {
target: {enabled: true, scaleFactor:0.75, type:'arrow'},
// to: {enabled: false, scaleFactor:0.5, type:'bar'},
middle: {enabled: false, scalefactor:1, type:'arrow'},
source: {enabled: true, scaleFactor:0.3, type:'arrow'}
// from: {enabled: false, scaleFactor:0.5, type:'arrow'}
},
arrowStrikethrough: true,
chosen: true,
color: {
// color:'#848484',
color:'red',
highlight:'#848484',
hover: '#848484',
inherit: 'from',
opacity:1.0
},
dashes: false,
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align: 'horizontal',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic'
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
}
},
// http://visjs.org/docs/network/physics.html#
physics: {
enabled: true,
barnesHut: {
gravitationalConstant: -2000,
centralGravity: 0.3,
// springLength: 95,
springLength: 175,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
},
forceAtlas2Based: {
gravitationalConstant: -50,
centralGravity: 0.01,
springConstant: 0.08,
springLength: 100,
damping: 0.4,
avoidOverlap: 0
},
repulsion: {
centralGravity: 0.2,
springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
hierarchicalRepulsion: {
centralGravity: 0.0,
springLength: 100,
springConstant: 0.01,
nodeDistance: 120,
damping: 0.09
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'barnesHut',
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5,
adaptiveTimestep: true
},
};
// -------------------------------------------------------------------------
// IMPORT DATA FROM EXTERNAL JSON FILE:
// Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc:
// NOTES:
// 1. Must use double quotes ("; not ') in that JSON file;
// 2. Cannot have comments in that file, only data! See:
// https://stackoverflow.com/questions/244777/can-comments-be-used-in-json
// 3. Per the path below, place the "test.json" file in a "data" subdirectory.
var json = $.getJSON("data/11-test2.json")
.done(function(data){
var data = {
nodes: data.nodes,
edges: data.edges
};
var network = new vis.Network(container, data, options);
});
var container = document.getElementById('mynetwork');
</script>
</BODY>
</HTML>
我检查了几次，但找不到瓶颈...感谢有人提供建议..这里可能有什么问题...谢谢
22/11/19- 感谢知道这个问题的人...我已经编辑了我的 json 文件并将源/目标更改为/从并且仍然相同...链接不可见...
*23/11/19- 仍然没有解决问题的线索。感谢您的建议。
【问题讨论】：
标签： javascript python html json vis.js-network