2017-11-25 29 views
1

Ich versuche, Elemente in Form eines automatisch generierten Flussdiagramms zu positionieren. Im Allgemeinen sollte inputs (grün) ganz links sein, outputs (rot) ganz rechts und der Rest sollte gemäß dem Layout in der Mitte platziert werden. Ich verwende dafür rank=source und rank=sink. Innerhalb eines Standarddiagramms funktioniert es gut.Graphviz drei Ränge Layout mit Untergraphen

Wenn ich jedoch Verschachtelung Grafiken beginne, scheint die rank=source nicht zu funktionieren. Ich erwarte, dass die drei Eingänge <> (Strom, Schalter, Raum_Temperatur) ganz links (wie es in den Untergraphen passiert) und die Untergraphen + Zustände (braune Kreise) und blaue Kästchen zwischen Eingängen und Ausgängen platziert werden.

Gibt es eine Möglichkeit „rank = center“ (oder so ähnlich?) Angeben

Ich habe durch die documentation gegangen, aber nicht das finden die richtigen Attribute (und wo sie zu spezifizieren).

MWE

digraph MyGraph { 
    node [fontsize=8 margin=".1,.01" width=.5 height=.5 shape=box] 
    edge [fontsize=8] 
    rankdir=LR; 
    ranksep = .25; 
    nodesep= .5; 

subgraph cluster_4386357488 { 
    label = " <<GrowLamp>>" 
    style=solid 
    {rank=source; 
     4386357544 [label="electricity" style=filled fillcolor="#b5fed9"] 
     4386357712 [label="room_temperature" style=filled fillcolor="#b5fed9"] 
     4386357768 [label="switch" style=filled fillcolor="#b5fed9"] 
    } 
    { 
     4386357880 [label="off" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
     4386357936 [label="on" style=filled fillcolor="#e2cbc1" shape=circle] 
     4386357656 [label="on_time" style=filled fillcolor="#d2ceef"] 
    } 
    {rank=sink; 
     4386357600 [label="light" style=filled fillcolor="#fcc5b3"] 
     4386357824 [label="temperature" style=filled fillcolor="#fcc5b3"] 
    } 
    4386357880 -> 4386357936 
    4386357936 -> 4386357880 
    { 
     subgraph cluster_4386357992 { 
      label = "<<Adder>>" 
      style=dashed 
      {rank=source; 
       4386358048 [label="heat_in" style=filled fillcolor="#b5fed9"] 
       4386358104 [label="room_temp_in" style=filled fillcolor="#b5fed9"] 
      } 
      { 
       4386358216 [label="state" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
      } 
      {rank=sink; 
       4386358160 [label="temperature" style=filled fillcolor="#fcc5b3"] 
      } 
      4386358216 -> 4386358160 [style="dashed"] 
     } 


     subgraph cluster_4386358328 { 
      label = "<<HeatElement>>" 
      style=solid 
      {rank=source; 
       4386358384 [label="electricity" style=filled fillcolor="#b5fed9"] 
      } 
      { 
       4386358496 [label="on" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
      } 
      {rank=sink; 
       4386358440 [label="heat" style=filled fillcolor="#fcc5b3"] 
      } 
      4386358496 -> 4386358440 [style="dashed"] 
     } 


     subgraph cluster_4386358608 { 
      label = "<<LightElement>>" 
      style=solid 
      {rank=source; 
       4386358664 [label="electricity" style=filled fillcolor="#b5fed9"] 
      } 
      { 
       4386358776 [label="off" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
       4386358832 [label="on" style=filled fillcolor="#e2cbc1" shape=circle] 
      } 
      {rank=sink; 
       4386358720 [label="light" style=filled fillcolor="#fcc5b3"] 
      } 
      4386358776 -> 4386358832 
      4386358832 -> 4386358776 
      4386358776 -> 4386358720 [style="dashed"] 
      4386358832 -> 4386358720 [style="dashed"] 
     } 

     4386358160 -> 4386357824 
     4386357712 -> 4386358104 
     4386358440 -> 4386358048 
     4386358720 -> 4386357600 
     4386357936 -> 4386358384 [style="dashed"] 
     4386357936 -> 4386358664 [style="dashed"] 
     4386357936 -> 4386357656 [style="dashed"] 
    } 

} 

hoffnungsvolle Lösung: Hier ist, was würde Ich mag mit enden. Beachten Sie, dass die grünen Kästchen alle innerhalb ihres jeweiligen Teilgraphen links liegen und dass die roten Kästchen auf der rechten Seite sind. Dazwischen sollten die restlichen Elemente von graphviz positioniert werden.

How it should look like

+0

Es ist kein Rang = Mitte, aber es gibt auch andere Möglichkeiten, um die Knoten zu erhalten, die Art und Weise ausrichten würden Sie mögen. Ich habe eine Idee, wie ich Ihnen helfen kann, aber ich bin mir sehr unsicher über das gewünschte Arrangement. Willst du alle grünen Kästen auf der linken Seite, die braunen Kreise in der Mitte und die orange Kästchen auf der rechten Seite? Oder machst du nur ein paar von ihnen so? Könnten Sie eine grobe Skizze hinzufügen, wie Sie die Elemente angeordnet haben möchten? – Craig

+0

Ich habe ein Bild hinzugefügt, das erklärt, was ich will. In jeder Box sollten die grünen Kästchen (Eingänge) links, die roten Kästchen (Ausgänge) rechts, der Rest in der Mitte sein (wie 'Punkt' passt). Daher sollte es von links nach rechts eine Art "Fluss" geben. – stklik

Antwort

1

Sie können das Layout, das Sie durch Hinzufügen von unsichtbaren Kanten wollen bekommen die drei Eingänge für den Rest des Diagramms zu verbinden, so dass der graphviz Layout-Algorithmus ihren Rang korrekt berechnen kann. Sie können jede Kante unsichtbar machen, indem Sie zur Kantenformatierung style=invis hinzufügen.

digraph MyGraph { 
    node [fontsize=8 margin=".1,.01" width=.5 height=.5 shape=box] 
    edge [fontsize=8] 
    rankdir=LR; 
    ranksep = .25; 
    nodesep= .5; 

subgraph cluster_4386357488 { 
    label = " <<GrowLamp>>" 
    style=solid 
    {rank=source; 
     4386357544 [label="electricity" style=filled fillcolor="#b5fed9"] 
     4386357712 [label="room_temperature" style=filled fillcolor="#b5fed9"] 
     4386357768 [label="switch" style=filled fillcolor="#b5fed9"] 
    } 
    { 
     4386357880 [label="off" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
     4386357936 [label="on" style=filled fillcolor="#e2cbc1" shape=circle] 
     4386357656 [label="on_time" style=filled fillcolor="#d2ceef"] 
    } 
    {rank=sink; 
     4386357600 [label="light" style=filled fillcolor="#fcc5b3"] 
     4386357824 [label="temperature" style=filled fillcolor="#fcc5b3"] 
    } 
    4386357880 -> 4386357936 
    4386357936 -> 4386357880 
    #invisible edges added to achieve correct layout 
    4386357544 -> 4386357880 [style="invis"] 
    4386357712 -> 4386357880 [style="invis"] 
    4386357768 -> 4386357880 [style="invis"] 

    { 
     subgraph cluster_4386357992 { 
      label = "<<Adder>>" 
      style=dashed 
      {rank=source; 
       4386358048 [label="heat_in" style=filled fillcolor="#b5fed9"] 
       4386358104 [label="room_temp_in" style=filled fillcolor="#b5fed9"] 
      } 
      { 
       4386358216 [label="state" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
      } 
      {rank=sink; 
       4386358160 [label="temperature" style=filled fillcolor="#fcc5b3"] 
      } 
      4386358216 -> 4386358160 [style="dashed"] 
     } 


     subgraph cluster_4386358328 { 
      label = "<<HeatElement>>" 
      style=solid 
      {rank=source; 
       4386358384 [label="electricity" style=filled fillcolor="#b5fed9"] 
      } 
      { 
       4386358496 [label="on" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
      } 
      {rank=sink; 
       4386358440 [label="heat" style=filled fillcolor="#fcc5b3"] 
      } 
      4386358496 -> 4386358440 [style="dashed"] 
     } 


     subgraph cluster_4386358608 { 
      label = "<<LightElement>>" 
      style=solid 
      {rank=source; 
       4386358664 [label="electricity" style=filled fillcolor="#b5fed9"] 
      } 
      { 
       4386358776 [label="off" style=filled fillcolor="#e2cbc1" shape=doublecircle] 
       4386358832 [label="on" style=filled fillcolor="#e2cbc1" shape=circle] 
      } 
      {rank=sink; 
       4386358720 [label="light" style=filled fillcolor="#fcc5b3"] 
      } 
      4386358776 -> 4386358832 
      4386358832 -> 4386358776 
      4386358776 -> 4386358720 [style="dashed"] 
      4386358832 -> 4386358720 [style="dashed"] 
     } 

     4386358160 -> 4386357824 
     4386357712 -> 4386358104 
     4386358440 -> 4386358048 
     4386358720 -> 4386357600 
     4386357936 -> 4386358384 [style="dashed"] 
     4386357936 -> 4386358664 [style="dashed"] 
     4386357936 -> 4386357656 [style="dashed"] 
    } 

} 
} 

Mit dot.exe Version 2.38 sollten Sie eine grafische Darstellung wie erhalten:

Nodes aligned correctly to graph source and sink.

+0

Ich habe versucht zu verstehen, warum die Lösung mit unsichtbaren Kanten arbeitet, aber nicht ohne sie. Mein Verdacht ist, dass Punkt nur die Knoten ausrichten kann, wenn sie mit dem Rest der Grafik verbunden sind, aber ich bin mir nicht sicher. Können Sie mir sagen, ob das stimmt? @Craig – stklik

+1

@ S.K.- Mein Verständnis davon kommt von einigen Tests, die ich bei der Beantwortung Ihrer Frage gemacht habe. Die Kante zwischen "room_temperature" und "room_temp_in" bewirkt, dass "dot" "room_temperature" einen Rang niedriger als "room_temp_in" setzt. Dies scheint die Positionierung dieses Knotens auf dem niedrigsten Rang zu überschreiben und könnte ein Fehler sein. Es zwingt auch die Knoten "Elektrizität" und "Switch", auf den gleichen Rang und nicht auf den niedrigsten Rang zu kommen.Wenn Sie diese Kante aus Ihrer Originaldatei löschen, erhalten Sie das gewünschte Layout, wenngleich die eine Kante fehlt. – Craig