Hinzufügen Rand kollabiert Knoten mit cose Layout

Question

Hier habe ich eine einfache grafische Darstellung haben demonstriert das Problem:

var cy = cytoscape({ 
    container: document.getElementById("stage"), 
    elements: [{ 
     data: {id: "a", value: 0} 
    }, { 
     data: {id: "b", value: 1} 
    }, { 
     data: {id: "ab", source: "a", target: "b", weight: 10} 
    }, { 
     data: {id: "c", value: 2} 
    }], 
    style: [{ 
     selector: "node", 
     style: { 
      content: "data(id)", 
      "text-valign": "center", 
      color: "white", 
      "background-color": "mapData(value, 0, 2, red, blue)" 
     } 
    }], 
    layout: { 
     name: "cose" 
    } 
}); 

Aus irgendeinem Grund, wenn ich eine Kante zwischen zwei Knoten hinzufügen, diese beiden Knoten kollabieren zusammen werden (obenauf von einander). Nach dem CoSE demo on GitHub habe ich keine Ahnung, warum es passiert. Irgendwelche Ideen?

Demo des Problems: https://jsfiddle.net/DerekL/mthg1uv5/

Es sollte drei Knoten sein: a, b und c, aber a und b sind übereinander angeordnet. Ziehen Sie den Knoten b aus dem Weg und Sie können den Knoten a darunter sehen.

Answer 1

Nicht sicher, ob dies Ihren Anforderungen entspricht oder nicht, aber die Randomisierung scheint das Problem zu beheben.

Wie so:

layout: { 
    name: "cose", 
    randomize: true 
} 

Sie können es auch beheben, indem Sie den Layouttyp zu ändern - ich versuchte, ‚breadthfirst‘ und es hat nicht das Problem haben. Ich bin nicht sehr versiert genug, um zu erklären, warum cose nicht funktioniert, wie Sie möchten, aber hoffentlich hilft das. Aus meiner Forschung scheint jeder das Layout als Alternative zu cose zu loben, also ist es vielleicht sehenswert, wenn das Ihren Bedürfnissen entspricht.