Cytoscape.js - Zeichnen Sie Kanten unter Verbundknoten

Question

Ich habe eine Gruppe von Knoten in einem übergeordneten (Verbund) Knoten gruppiert. Ich möchte die Kanten von den "äußeren" Knoten (diejenigen außerhalb des zusammengesetzten Knotens) zu den "inneren" Knoten (jene innerhalb des zusammengesetzten Knotens) unter den zusammengesetzten Knoten anzeigen.

(Ungefähr wie this demo.)

So weit, ich habe versucht, die z-index Eigenschaft wie diese Einstellung, mit z-index-compare Set manual, aber es funktioniert nicht:

style: [ 
    { 
     selector: 'node', 
     style: { 
      'z-index-compare': 'manual', 
      'width': 10, 
      'height': 10, 
      'background-color': '#46A', 
      'z-index': 3 
     } 
    }, 
    { 
     selector: ':parent', 
     style: { 
      'z-index-compare': 'manual', 
      'background-color': '#CDF', 
      'z-index': 9 
     } 
    }, 
    { 
     selector: 'edge', 
     style: { 
      'z-index-compare': 'manual', 
      'width': 1, 
      'line-color': '#BCE', 
      'z-index': 1 
     } 
    }, 
    { 
     selector: '.dense', 
     style: { 
      'z-index-compare': 'manual', 
      'width': 0.5, 
      'z-index': 1 
     } 
    } 
] 

Die Dokumentation für Cytoscape.js sagt nichts darüber, wo die z-index-compare-Eigenschaft anzugeben, so gibt es möglicherweise einen Fehler in meinem CSS.

Answer 1

Eine Lösung war ich fand die z-index-Tags zu entfernen und z-compound-depth auf dem :parent Selektor verwenden, wie folgt aus:

style: [ 
    { 
     selector: 'node', 
     style: { 
      'width': 10, 
      'height': 10, 
      'background-color': '#46A' 
     } 
    }, 
    { 
     selector: ':parent', 
     style: { 
      'z-compound-depth': 'top', 
      'background-color': '#CDF' 
     } 
    }, 
    { 
     selector: 'edge', 
     style: { 
      'width': 1, 
      'line-color': '#BCE' 
     } 
    }, 
    { 
     selector: '.dense', 
     style: { 
      'width': 0.5 
     } 
    } 
]