vis.js simple example: edges do not show

问题

I working on a simple network visualization example based on vis.js. I have 5 nodes and 6 edges which I store in a JSON file. The edges do not show up, whereas they do in the examples given on the vis.js homepage. Code:

HTML-File:

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

{"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-File:

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

Output in browser:

I'd be very happy if you have a hint for me what I am doing wrong.

回答1:

Answered by OP in comment:

the vis.js documentation mentions that one can import gephi-exported JSONs, which were my starting point. There edges are indicated by "source" and "target". Vis.js requires "from" and "to" keywords. It would be nice to document this a bit better

回答2:

vis requires data in this format:

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

来源：https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show

标签

javascript

json

vis.js

vis.js-network