vis.js простой пример: ребра не отображаются

Я работаю над простым примером визуализации сети на основе vis.js. У меня есть 5 узлов и 6 ребер, которые хранятся в файле JSON. Края не отображаются, а в примерах, приведенных на домашней странице vis.js. Код: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);

Вывод в браузере:

Я был бы очень рад, если у вас есть намек на меня, что я делаю неправильно.

источник

2015-10-28 WolfiG

Найдено причина: документация vis.js упоминает, что можно импортировать gephi экспортируемые JSONs, которые были моя отправная точка. На краях обозначены «источник» и «цель». Для Vis.js требуются ключевые слова «от» и «до». Было бы неплохо документировать это немного лучше .... – WolfiG

Ответил ОП в комментарии:

документация vis.js упоминает, что можно импортировать gephi экспортируемые JSONs, которые были моей отправной точкой. На краях обозначены «источник» и «цель». Для Vis.js требуются ключевые слова «от» и «до». Было бы неплохо, чтобы задокументировать это немного лучше

источник

2015-12-15 19:42:26 rene

визави требует данных в этом формате:

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

источник

2017-01-07 13:30:08 subhav

vis.js простой пример: ребра не отображаются

ответ

Смежные вопросы