Kann ich ein Flussdiagramm (kein Baumdiagramm) mit D3.js erstellen

Meiner bescheidenen Meinung nach D3.js eignet sich nicht sehr gut für diese Art der Visualisierung. Die Visualisierung ist einfach zu Komplex, um eine einfache Zuordnung von Daten zu SVG (und das ist es, was D3.js ist hauptsächlich für: die Generierung von DOM (Dokumente) Daten, die durch prägnante Zuordnungen).

Können Sie arbeiten, um diese Einschränkungen durch die Einführung von mehr Logik in zwischen so, dass die Daten nicht direkt angezeigt werden, sondern eher ein Modell erstellt wird, werden einige Berechnungen durchgeführt und dann das Ergebnis verwandelt sich das SVG-Format von D3. Dies ist, was dagre zu tun versucht, und es funktioniert ziemlich gut.

Aber Ihr graph hat einige spezielle Einschränkungen, die derzeit nicht unterstützt werden durch einfachere Implementierungen, die layout-Algorithmus: In der letzten Ebene erhalten Sie einen Gabel-wie rendering. In der "Entscheidung"-Schicht weisen Sie Einschränkungen auf die Kanten, damit Sie verlassen an der Links und rechts von den Knoten, die Sie auch eine Erschwernis für die Entscheidung-Knoten werden auf derselben Ebene.

Alle diese Informationen sind nicht sichtbar in der Grafik-Struktur selbst. Dafür brauchen Sie zu kommentieren, die Informationen in Ihr Modell und sagen Sie den layout-Algorithmus zu Ehren diese Einschränkungen. Zu den besten meines Wissens nur kommerzielle graph-drawing library-Implementierungen unterstützen derzeit diese erweiterte layout-Funktionen.

yFiles for HTML ist wie eine Bibliothek: In diese demo Sie können mit dem folgenden JSON um ein Ergebnis zu bekommen wie diese:

Wechseln Sie auf das combobox-Eintrag oben: "5 - Komplexe Objekte + Edge-Labels"

, Und ändern Sie die JSON-in den Quellen-Knoten, Kanten-Quell-und Node-Vorlage Abschnitte wie folgt:

Knoten Quelle

{
0:{'name':'Start',color:'green'}, 
1:{'name':'Read A,B,C',color:'yellow'}, 
2:{'name':'Is B>C?',color:'green'},
3:{'name':'Is A>B?',color:'green'},
4:{'name':'Is A>C?',color:'green'},
5:{'name':'Print B',color:'green'},
6:{'name':'Print C',color:'green'},
7:{'name':'Print C',color:'green'},
8:{'name':'Print A',color:'green'},
9:{'name':'End',color:'red'}
}

Edge Quelle

[
{from:'0', to:'1', label:''}, 
{from:'1', to:'3', label:''}, 
{from:'3', to:'2', label:'No'}, 
{from:'3', to:'4', label:'Yes'},
{from:'2', to:'5', label:'Yes'},
{from:'2', to:'6', label:'No'},
{from:'4', to:'7', label:'No'},
{from:'4', to:'8', label:'Yes'},
{from:'5', to:'9', label:''},
{from:'6', to:'9', label:''},
{from:'7', to:'9', label:''},
{from:'8', to:'9', label:''}
]

Vorlage

<rect fill='{Binding color}' stroke='LightBlue' stroke-width='2' 
    width='{TemplateBinding width}' 
    height='{TemplateBinding height}'></rect>
<text transform='translate(10 20)' data-content='{Binding name}'   
    style='font-size:18px; font-family:Arial; fill:#000; text-anchor: left;
    dominant-baseline: central;'></text>

Beachten Sie, dass die Verwendung einer anderen Art von JSON ist möglich, auch (wie die demo zeigt). Ich glaube nicht, dass das JSON-format ist ein problem in irgendeiner Weise und wie Sie sehen können, bekommen ein ordentliches Ergebnis, aber immer noch die Einschränkungen, die ich erwähnt habe, nicht berücksichtigt worden sind und Hinzugefügt, um die JSON. Leider ist das hinzufügen von diesen Einschränkungen nicht durch das demo-interface, das ich verwende oben rechts jetzt, aber muss getan werden, durch hinzufügen von code, um den eigentlichen Quellcode der demo. Sie können sehen, wie diese Einschränkungen in einer anderen demo (allerdings ohne die JSON) in dieses interaktive layout-demo.

Setzen alle bits und Stücke zusammen, können Sie leicht erreichen diese Art von Ergebnis, automatisch:

Gleiches Beispiel gefunden und ausprobiert interaktiv in diesem interaktive Flussdiagramm layout demo.

Haftungsausschluss: ich arbeite für die Firma, die erstellt wird, die Bibliothek aber auf SO/SE I repräsentieren nicht mein Arbeitgeber. Meine Beiträge sind meine eigenen.

InformationsquelleAutor der Antwort Sebastian

Ich denke, das gibt Ihnen was Sie brauchen:

http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html

InformationsquelleAutor der Antwort Simon