1. Zuhause
  2. Frage und Antwort
  3. Knoten - Wie json richtig aus einer lokalen Datei gelesen wird?

Knoten - Wie json richtig aus einer lokalen Datei gelesen wird?

2016-07-19 15 views
1

Ich benutze node.js, um eine Seite (index.html) zu bedienen, wo ich ein Netzwerkdiagramm mit vis.js visualisiere. Um ein Netzwerkdiagramm mit dieser Bibliothek zu zeichnen, muss man Knoten und Kanten JSON-Arrays (see example) bereitstellen. Knoten - Wie json richtig aus einer lokalen Datei gelesen wird?

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

Die erste Version meiner index.html Datei wie folgt aussieht:

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

Und es ist ganz gut funktioniert. Aber wenn ich versuche, aus einer lokalen Datei des Knoten und Kanten Arrays zu lesen, wird der Netzgraph nicht angezeigt:

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

Ich verwende:

  • Knoten .json:

    [ { "id": 1, "label": "Node 1" 0.123.}, { "id": 2, "label": "Node 2" }, { "id": 3, "label": "Node 3" }, { „id ": 4, "label": "Node 4" } ]

  • edges.json:

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

Gibt es einen Unterschied zwischen dem Erstellen eines JSON in Ihrem Javascript und dem Lesen aus einer Datei? Kann mir bitte jemand helfen, den Fehler zu finden?

Dank!

Quelle

2016-07-19 OmarIlias

+0

'$ .getJSON' ist asynchrone Funktion. Sie führen Ihre Logik- und 'console.log'-Werte aus, noch bevor sie abgerufen wurden. – anvk

+0

@anvk Das war hilfreich, danke! Ich habe es jetzt. – OmarIlias

Antwort

0

Ajax ist standardmäßig asynchron, so dass Sie das Diagramm zeichnen müssen, nachdem Ihre Daten geladen wurden!

Oder Sie können die add Funktion von DataSet verwenden, um Ihre Knoten und Kanten hinzuzufügen, nachdem sie geladen sind.

Hier ist ein funktionierendes Beispiel:

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>

Quelle

2016-07-27 09:56:56 mojoaxel

0

Basierend auf dem Kommentar von @anvk, habe ich das globale Ajax configs indem $.ajaxSetup({ async: false }); vor meinem $.getJSON und es funktionierte synchron! Ich kann sie zurück zum asynchronen durch $.ajaxSetup({ async: true });

Dank schalten.

Quelle

2016-07-19 19:28:59 OmarIlias

+0

Ich hoffe es ist was ich will. Asynchrone Ausführung ist viel schneller als Async, da Sie 2 separate Dateien parallel lesen und Ihre Logik ausführen können, sobald diese 2 Aktionen abgeschlossen sind. Ich würde Ihnen wärmstens empfehlen, mehr über asynchrone Funktionen zu lesen und in JavaScript zu fließen. – anvk

+0

Vielen Dank. Ich werde das machen. Für jetzt, das ist was ich will, ich habe 2 Objekte, die ich aus 2 separaten Dateien lesen muss. Ich denke also nicht, dass Async oder Sync in diesem Fall einen großen Unterschied machen würden. Aber trotzdem hast du recht und danke nochmal. – OmarIlias

 Verwandte Themen

  • Keine verwandten Themen^_^