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

Question

我正在使用 node.js 提供一个页面 (index.html)，在该页面中我使用 vis.js. In order to draw a network graph with this library, one needs to provide a nodes and edges json arrays (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>

它工作得很好。但是，当我尝试从本地文件读取 nodes 和 edges 数组时，网络图没有显示：

<!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:

[ { "id": 1, "label": "Node 1" }, { "id": 2, "label": "Node 2" }, { "id": 3, "label": "Node 3" }, { "id": 4, "label": "Node 4" } ]
edges.json:

[ { "from": 1, "to": 2 }, { "from": 1, "to": 3 }, { "from": 1, "to": 4 } ]

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

谢谢！

Answer 1

根据@anvk 的评论，我通过在 $.getJSON 之前执行 $.ajaxSetup({ async: false }); 将全局 ajax 配置设置为同步，并且成功了！我可以通过 $.ajaxSetup({ async: true });

将它们切换回异步

谢谢。

Answer 2

Ajax默认是异步的，所以你必须在加载数据后绘制图表！

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

这是一个工作示例：

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？

node - how to read correctly json from a local file?

javascript

jquery

json

node.js

vis.js