Question

我正在研究一个基于vis.js的简单网络可视化示例。我有5个节点和6个边，我存储在JSON文件中。边缘不会显示，而它们在vis.js主页上给出的示例中显示。代码：

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);

在浏览器中输出

如果你暗示我做错了什么，我会非常高兴。

Answer 1

OP在评论中回答：

vis.js文档提到可以导入gephi导出的JSON，这是我的出发点。边缘由“源”和“目标”表示。 Vis.js需要“from”和“to”关键字。将文档更好地记录下来会很好

Answer 2

vis需要采用以下格式的数据：

var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);

vis.js简单示例：边缘不显示

2 个答案: