我正在使用 vis.js 创建映射，我在示例代码中使用文件 saveAndLoad.html。保存功能不错，可以导出json文件。但是当我在导入函数中加载 json 文件时，它不会为我创建映射。我不知道我的误解是什么，请帮助。这是导入函数。
function importNetwork() {
/*var inputValue = exportArea.value;
var inputData = JSON.parse(inputValue);
var data = {
nodes: getNodeData(inputData),
edges: getEdgeData(inputData)
}
network = new vis.Network(container, data, {});*/
var gephiJSON = loadJSON("./1.json"); // code in importing_from_gephi.
// you can customize the result like with these options. These are explained below.
// These are the default options.
var parserOptions = {
edges: {
inheritColors: false
},
nodes: {
fixed: true,
parseColor: false
}
}
// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.network.convertGephi(gephiJSON, parserOptions);
// provide data in the normal fashion
var data = {
nodes: parsed.nodes,
edged: parsed.edges
};
// create a network
var network = new vis.Network(container, data);
resizeExportArea();
}
最佳答案
我搜索了相当多的内容来解决将外部 JSON 数据文件加载到 vis.js 网络这一非常简单的任务。这是一个可行的解决方案。
阅读我在 HTML 文件(下方)中的评论，了解更多信息:
我通过 NPM 安装了 vis.js，但您也可以只下载/获取
vis.min.js文件；visjs.org 在网络模块的“完整选项”选项卡中提供的代码 edge options由于额外的逗号等原因，出现了错误。我在我的 HTML 代码中包含了一个工作副本(同上:“物理”选项)。
如我的 HTML 文件中的评论所述，JSON 数据文件的格式非常特别:使用双引号；花括号 { } 没有被引用(例如，如果你想定义每个边缘的属性，在那个文件中)； ....
json_test.html
<!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: {
to: {enabled: true, scaleFactor:0.75, type:'arrow'},
// to: {enabled: false, scaleFactor:0.5, type:'bar'},
middle: {enabled: false, scalefactor:1, type:'arrow'},
from: {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/test.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>
test.json
{"nodes":[
{"id":"1", "label":"Node 1"}
,{"id":"2", "label":"Node 2\nline 2"}
,{"id":"3", "label":"Node 3"}
,{"id":"4", "label":"Node 4"}
,{"id":"5", "label":"Node 5"}
],
"edges":[
{"from":"1", "to":"2", "label":"apples"}
,{"from":"1", "to":"3", "label":"bananas"}
,{"from":"2", "to":"4", "label":"cherries"}
,{"from":"2", "to":"5", "label":"dates"}
,{"from":"2", "to":"3", "label":"EAGLES!", "color":{"color":"green", "highlight":"blue"}, "arrows":{"to":{"scaleFactor":"1.25", "type":"circle"}}}
]
}
输出
关于javascript - 导入 json 文件以在 vis.js 中创建网络，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42722856/