Question

我使用node.js来提供一个页面（index.html），在那里我使用vis.js可视化网络图。为了使用此库绘制网络图，需要提供节点和边 json数组（see example）。

// create an array with nodes
  var _nodes_ = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ];


  // create an array with edges
  var _edges_ = [
    {from: 1, to: 2},
    {from: 1, to: 3},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ];

index.html 文件的第一个版本如下所示：

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/vis.js"></script>
</head>

<body>

<div id="mynetwork"></div>

<script type="text/javascript" >


  // create an array with nodes    
  var _nodes_ = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ];


  // create an array with edges
  var _edges_ = [
    {from: 1, to: 2},
    {from: 1, to: 3},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ];

console.log(_nodes_);
console.log(_edges_);


  // create a network
  var container = document.getElementById('mynetwork');
  var data= {
    nodes: _nodes_,
    edges: _edges_,
  };
  var options = {
    autoResize: true,
    clickToUse: false,
    width: '800px',
    height: '800px'
  };
  var network = new vis.Network(container, data, options);
</script>

</body>
</html>

它工作得很好。但是，当我尝试从本地文件中读取节点和边数组时，网络图形无法显示：

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/vis.js"></script>
</head>

<body>

<div id="mynetwork"></div>

<script type="text/javascript" >
  // create an array with nodes

var _nodes_;
var _edges_;

 $.getJSON('json/nodes.json', function(nodes) {
     _nodes_= nodes;
  });

  $.getJSON('json/edges.json', function(edges) {
      _edges_ = edges;

  });



console.log(_nodes_);
console.log(_edges_);


  // create a network
  var container = document.getElementById('mynetwork');
  var data= {
    nodes: _nodes_,
    edges: _edges_,
  };
  var options = {
    autoResize: true,
    clickToUse: false,
    width: '800px',
    height: '800px'
  };
  var network = new vis.Network(container, data, options);
</script>

</body>
</html>

我正在使用：

nodes.json ：

[ { ＆＃34; id＆＃34;：1，＆＃34;标签＆＃34;：＆＃34;节点1＆＃34; }， { ＆＃34; id＆＃34;：2，＆＃34;标签＆＃34;：＆＃34;节点2＆＃34; }， { ＆＃34; id＆＃34;：3，＆＃34;标签＆＃34;：＆＃34;节点3＆＃34; }， { ＆＃34; id＆＃34;：4，＆＃34;标签＆＃34;：＆＃34;节点4＆＃34; } ]
edges.json ：

[ { ＆＃34;来自＆＃34;：1，＆＃34;到＆＃34;：2 }， { ＆＃34;来自＆＃34;：1，＆＃34;到＆＃34;：3 }， { ＆＃34;来自＆＃34;：1，＆＃34;到＆＃34;：4 } ]

在javascript中创建json和从文件中读取之间有区别吗？有人可以帮我发现这里的错误吗？

谢谢！

Answer 1

基于@anvk的评论，我在$.ajaxSetup({ async: false });之前通过$.getJSON将全局ajax配置设置为同步，并且它有效！我可以通过$.ajaxSetup({ async: true });

将它们切换回异步

感谢。

Answer 2

默认情况下，Ajax是异步的，因此您必须在加载数据后绘制图形！

或者您可以使用add DataSet函数在加载后添加节点和边。

以下是一个工作示例：

var _nodes = new vis.DataSet();
var _edges = new vis.DataSet();

var container = document.getElementById('mynetwork');
var data = {
  nodes: _nodes,
  edges: _edges,
};
var options = {
  autoResize: true,
  clickToUse: false
};
var network = new vis.Network(container, data, options);

$.getJSON('//gist.githubusercontent.com/mojoaxel/b9ed2fe1ff7154b339d6ffde555f0606/raw/6d9b1c4e0b642ab05837ee60a6c6ca9f64b9995f/edges.json', function(edges) {
  _edges.add(edges);
});
$.getJSON('https://gist.githubusercontent.com/mojoaxel/b9ed2fe1ff7154b339d6ffde555f0606/raw/6d9b1c4e0b642ab05837ee60a6c6ca9f64b9995f/nodes.json', function(nodes) {
 _nodes.add(nodes);
});

#mynetwork {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>

Answer 3

对nodes.json尝试此格式{"id": "1", "label": "Node 1"}。

对edges.json使用'source'&'target'而不是'from' & 'to'。

以下是vis.js的示例。请查看此示例中的JSON文件格式。http://visjs.org/examples/network/data/importingFromGephi.html

node - 如何从本地文件中正确读取json？

3 个答案: