wie Knoten und Elemente aus MySQL-Datenbank in cytoscape.js abrufen?

Question

Ich habe eine Tabelle 'entrezgene' mit genID, Name, der zum Erstellen der Knoten verwendet wird und eine weitere Tabelle 'Interaktion' mit genID, genID2, die als Quelle bzw. Ziel in cytoscape.js verwendet wird.

ich eine PHP-Datei unten geschrieben haben (nur für die entrezgene Tabelle):

<?php 
include 'dbconnection.php'; 

$sqlentrezgene = "select geneID, name from entrezgene"; 
$resultentrezgene = mysqli_query($connection, $sqlentrezgene) or die("Error in Selecting " . mysqli_error($connection)); 

$json = array(); 

while($row = mysqli_fetch_array ($resultentrezgene))  
{ 
$entrezgene = array(
    'id' => $row['geneID'], 
    'name' => $row['name'] 
); 
array_push($json, $entrezgene); 
} 

$jsonstring = json_encode($json); 
echo $jsonstring; 
?> 

Cytoscape.js Datei:

 $('#cy').cytoscape({ 
    style: cytoscape.stylesheet() 
    .selector('node') 
     .css({ 
     'content': 'data(name)', 
     'text-valign': 'top', 
     'color': 'white', 
     'text-outline-width': 1, 
     'text-outline-color': '#888' 
     }) 
    .selector('edge') 
     .css({ 
     'target-arrow-shape': 'triangle' 
     }) 
    .selector(':selected') 
     .css({ 
     'background-color': 'black', 
     'line-color': 'black', 
     'target-arrow-color': 'black', 
     'source-arrow-color': 'black' 
     }) 
    .selector('.faded') 
     .css({ 
     'opacity': 0, 
     'text-opacity': 0.25 
     }), 



    elements: { 
    nodes: [ 

    //Manually entered 
     { data: {id: '1', name: 'A1BG_HUMAN'} }, 
     { data: {id: '10549', name: 'PRDX4_HUMAN'} }, 
     { data: {id: '10935', name: 'PRDX3_HUMAN'} }, 
     { data: {id: '1192', name: 'CLIC1_HUMAN'} }, 
     { data: {id: '2923', name: 'PDIA3_HUMAN'} } 

    ], 
    edges: [ 
    //Manually entered 
     { data: { source: '1', target: '10549' } }, 
     { data: { source: '10549', target: '10935' } }, 
     { data: { source: '10549', target: '1192' } }, 
     { data: { source: '10549', target: '2923' } } 
    ] 
    }, 

    ready: function(){ 
    window.cy = this; 

    // giddy up... 

    cy.elements().unselectify(); 

    cy.on('tap', 'node', function(e){ 
     var node = e.cyTarget; 
     var neighborhood = node.neighborhood().add(node); 

     cy.elements().addClass('faded'); 
     neighborhood.removeClass('faded'); 
    }); 

    cy.on('tap', function(e){ 
     if(e.cyTarget === cy){ 
     cy.elements().removeClass('faded'); 
     } 
    }); 
    } 
}); 

Aber das Problem ist, dass die Tabelle entrezgene 16.388 Zeilen hat und Die Tabelleninteraktion hat 225.287 Zeilen. Die manuelle Eingabe ist daher zeitaufwendig. Gibt es dafür eine Lösung?

Answer 1

Ich weiß nicht, Ihre gesamte Projektstruktur, so dass ich nicht detaillierte Anweisungen geben können, aber ich kann Ihnen zeigen, wie ich cytoscape.js in einem meiner Projekte verwenden:

Dies ist eine Ausnahme von meinem graphview.js

Haupteingangspunkt ist die Init-Funktion (die Sie auf Dokument bereit oder einen Klick auf ein Element aufrufen können, ...). Dies führt einen Ajax-Anruf zu Ihrem Server aus, und falls der Anruf erfolgreich ist, ruft er die Funktion displaygraph mit den empfangenen Daten auf.

Die Funktion displaygraph ist dann für die Initialisierung und Anzeige des Diagramms verantwortlich. Er empfängt die Daten vom Ajax-Aufruf. Dies könnte mehr oder weniger Ihr Code oben sein, nur die Knoten und Kanten werden nicht vorgestoßen, sondern aus den vom Server empfangenen Daten genommen.

var displaygraph = function(data) { 
    $('#cy').cytoscape({ 
     style: // ... 

     elements: { 
      nodes: data.nodes, 
      edges: data.edges 
     }, 

     ready: function(){ 
      //... 
     } 
    }); 

} 

Und auf der Serverside, müssen Sie sicher, dass die Daten machen, die an den Client gesendet wird zurück enthält alle notwendigen Informationen, das heißt, die Knoten und Kanten strukturiert, wie es erwartet Cytoscape. Ich gehe davon aus, dass Ihr ursprünglicher Code zum Lesen der Datenbank funktioniert (ich bin kein PHP-Typ, kann das also nicht überprüfen), also habe ich gerade die Interaktionen aus der anderen Tabelle hinzugefügt und ein Objekt erstellt, das Knoten und Kanten enthält.

<?php 
include 'dbconnection.php'; 

$sqlentrezgene = "select geneID, name from entrezgene"; 
$resultentrezgene = mysqli_query($connection, $sqlentrezgene) or die("Error in Selecting " . mysqli_error($connection)); 

$nodes= array(); 
while($row = mysqli_fetch_array ($resultentrezgene))  
{ 
    //create each entry in the array exactly as cytoscape expects it, ie with the data property 
    $entrezgene = array('data' => array(
     'id' => $row['geneID'], 
     'name' => $row['name'] 
    )); 
    array_push($nodes, $entrezgene); 
} 

$sqlentrezinter = "select geneID1, geneID2 from interaction"; 
$resultentrezinter = mysqli_query($connection, $sqlentrezinter) or die("Error in Selecting " . mysqli_error($connection)); 

$edges= array(); 
while($row = mysqli_fetch_array ($resultentrezinter))  
{ 
    $entrezinter = array('data' => array(
     'source' => $row['geneID1'], 
     'target' => $row['geneID2'] 
    )); 
    array_push($edges, $entrezinter); 
} 

$json = array(
    'nodes' => $nodes, 
    'edges' => $edges 
); 

$jsonstring = json_encode($json); 
echo $jsonstring; 
?> 

Ich bin kein PHP-Typ, so kann es einige Probleme mit dem Server-Teil sein, aber man sollte die Gesamt Idee.