Cytoscape.js Preset Layout Dokumentation

Question

Ich habe eine cytoscape.js Grafik, die rendert. Ich bin daran interessiert, das voreingestellte Layout für die Platzierung der Knoten zu nutzen. Die cytoscape.js Dokumentation zeigt die folgende für das voreingestellte Layout:

var options = { 
    name: 'preset', 
    positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; } 
    zoom: undefined, // the zoom level to set (prob want fit = false if set) 
    pan: undefined, // the pan level to set (prob want fit = false if set) 
    fit: true, // whether to fit to viewport 
    padding: 30, // padding on fit 
    animate: false, // whether to transition the node positions 
    animationDuration: 500, // duration of animation in ms if enabled 
    animationEasing: undefined, // easing of animation if enabled 
    ready: undefined, // callback on layoutready 
    stop: undefined // callback on layoutstop 
}; 

Kann jemand mir helfen, ein Beispiel zu verstehen oder geben, was die Dokumentation bedeutet, wenn es sagt die folgenden

// map of (node id) => (position obj); or function(node){ return somPos; } 

Ich speichere alle die Knoten in einer MySQL-Datenbank-Tabelle mit den folgenden Spalten

id, origin, destination, x position, y position

Hat die cytoscape.js Positionen ein dicti nehmen onary das sieht so aus:

{'id': 1, {'x':10, 'y':45}}, {'id': 2, {'x':21, 'y':32}} etc?

Answer 1

Dies bedeutet, wenn die positions als undefined festgelegt ist, müssen Sie eine Funktion erstellen, um die Positionen jedes Knotens zu erhalten.

Zum Beispiel:

cy.nodes().forEach(function(n){ 
    var x = n.data("x"); 
    var y = n.data("y"); 
}); 

Diese sollte zurückkehren Ihre Knotenposition.

EDIT

Sie die Knotenposition einstellen, wenn Sie es schaffen. Zum Beispiel:

var elements; 
 
    elements: [{"data":{"id":"yourID","name":"name"},"position"{"x":"0.0","y":"0.0"}}];

Weitere Informationen finden sich this Demo auf Cytoscape js Website. Hier stellen sie die Position manuell ein.