Context

Ich möchte für die Visualisierung Graphen cytoscape.js verwenden. Während ich in der Lage bin mit einer Vielzahl von Sprachen (C++, Mathematica, R, usw.), bin ich neu zu Javascript, JSON, HTML und CSS. Daher wäre es vorteilhaft, diese Sprachen durch diesen Anwendungsfall zu lernen (Implementieren von Graphen mit cytoscape.js). Bitte beachten Sie dies in Ihrer Antwort.Laden und mit JSON für Cytoscape.js

Ich habe zuvor gefragt, wie [cytoscape.js und how to get graphs display (requires a div) remote laden. Seitdem habe ich ein Skript erstellt, das ein Diagramm, das in einer der anderen Sprachen dargestellt wird, in das Format JSON mit der Nummer here verwandelt. Während ich alles direkt in mein Programm kopieren und einfügen kann, ist das für große Netzwerke eindeutig ein schlechter Weg, es zu implementieren. Ein Beispiel für die Ausgabe meines Skripts ist unten.

Frage

Bei einer JSON Objekt/Datei wie kann ich folgendes tun (?): Der Code

Last es in cytoscape.js ohne Kopie-Einfügen.
Referenziert es einmal geladen. (ZB Grund Erklärung, wie JSON-Syntax für die Verwendung in cytoscape.js)

Skript-Ausgabe

cytoscape({ 

container: document.getElementById('cy'), 

elements: [ 
{// node Node 1 
    group: 'nodes', 

    data: { 
     id: 'Node 1' 
    }, 

    selected: false, 

    selectable: true, 

    locked: false, 

    grabbable: true, 

    selectable: true, 

}, 
{// node Node 2 
    group: 'nodes', 

    data: { 
     id: 'Node 2' 
    }, 

    selected: false, 

    selectable: true, 

    locked: false, 

    grabbable: true, 

    selectable: true, 

}, 
{// node Node 3 
    group: 'nodes', 

    data: { 
     id: 'Node 3' 
    }, 

    selected: false, 

    selectable: true, 

    locked: false, 

    grabbable: true, 

    selectable: true, 

}, 
{// edge 1_2 
    group: 'edges', 

    data: { 
     id: '1_2', 
     source: '1', 
     target: '2' 
    } 
}, 
{// edge 2_3 
    group: 'edges', 

    data: { 
     id: '2_3', 
     source: '2', 
     target: '3' 
    } 
}, 
{// edge 3_1 
    group: 'edges', 

    data: { 
     id: '3_1', 
     source: '3', 
     target: '1' 
    } 
} 
], 
style: [ 
    { 
     selector: 'node', 
     style: { 
      'content': 'data(id)' 
     } 
    } 
] 

});

Quelle

2016-10-29 SumNeuron

<head> 
    <title></title> 
    <script src="js/vendor/cytoscape.min.js"></script> 
    <script src="js/vendor/jquery.min.js"></script> 
</head> 

<style> 
    #cy { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 
</style> 

<body> 
    <div id="cy"></div> 
    <script> 
     $.getJSON("cyto.js", function (data) { 
      //console.log(data); 
      var cy = cytoscape({ 
       container: document.getElementById('cy'), 
       elements: data, 
       style: [ 
        { 
         selector: 'node', 
         style: { 
          'label': 'data(label)', 
          'width': '60px', 
          'height': '60px', 
          'color': 'blue', 
          'background-fit': 'contain', 
          'background-clip': 'none' 
         } 
        }, { 
         selector: 'edge', 
         style: { 
          'text-background-color': 'yellow', 
          'text-background-opacity': 0.4, 
          'width': '6px', 
          'target-arrow-shape': 'triangle', 
          'control-point-step-size': '140px' 
         } 
        } 
       ], 
       layout: { 
        name: 'circle' 
       } 
      }); 
     }); 
    </script> 
</body>

in cyto.js können Sie Eingabe gültig JSON-Daten, zum Beispiel

{ 
    "nodes": [ 
      { 
      "data": {"id": "a", "label": "Gene1"} 
      }, 
      { 
      "data": {"id": "b", "label": "Gene2"} 
      }, 
      { 
      "data": {"id": "c", "label": "Gene3"} 
      }, 
      { 
      "data": {"id": "d", "label": "Gene4"} 
      }, 
      { 
      "data": {"id": "e", "label": "Gene5"} 
      }, 
      { 
      "data": {"id": "f", "label": "Gene6"} 
      } 
    ], 
      "edges": [ 
      { 
      "data": { 
      "id": "ab", 
        "source": "a", 
        "target": "b" 
      } 
      }, 
      { 
      "data": { 
      "id": "cd", 
        "source": "c", 
        "target": "d" 
      } 
      }, 
      { 
      "data": { 
      "id": "ef", 
        "source": "e", 
        "target": "f" 
      } 
      }, 
      { 
      "data": { 
      "id": "ac", 
        "source": "a", 
        "target": "d" 
      } 
      }, 
      { 
      "data": { 
      "id": "be", 
        "source": "b", 
        "target": "e" 
       } 
       }]  
    }

Quelle

2016-12-19 10:08:03

Lassen Sie uns annehmen Sie haben eine JSON-Datei im selben Ordner wie die 'index.html' und dem Server läuft. Fordern Sie zuerst die JSON-Datei über eine HTTP-Anfrage an (mit plain javascript oder jquery).

Wenn Ihre JSON-Datei das gleiche Format wie die Eigenschaften elements hat, können Sie es einfach zu einem Javascript-Objekt analysieren und einstellen. Z.B.

var myObject = {}; 
 
var xhttp = new XMLHttpRequest(); 
 
xhttp.onreadystatechange = function() { 
 
    if (this.readyState == 4 && this.status == 200) { 
 
     myObject = JSON.parse(this.responseText); 
 
     initCytoscape(); 
 
    } 
 
}; 
 
xhttp.open("GET", "myJson.json", true); 
 
xhttp.send(); 
 

 
function initCytoscape() { 
 
    cytoscape({ 
 
    container: document.getElementById('cy'), 
 
    elements: myObject 
 
    }); 
 
}

wenn die json Eigenschaft ist anders als Format des Cytoscape, dann muss man es programmatisch konvertieren.

Quelle

2016-10-30 00:54:03

Ich habe viele Fragen, aber könnten Sie vielleicht gehen mir durch wie das geht? – SumNeuron

Wenn Sie die API 'fetch()' verwenden, können Sie einfach 'elements: fetch ('./ my-dir/myfile.json') 'angeben, da Cytoscape Versprechungen für Ihre Daten akzeptiert – maxkfranz

Laden und mit JSON für Cytoscape.js

Context

Frage

Skript-Ausgabe

Antwort

Verwandte Themen