2017-11-25 407 views
1

我試圖將元素定位在自動生成的流程圖的形式。 一般而言,inputs(綠色)應該在最左邊,outputs(紅色)在最右邊,其餘的應按照佈局放置在中間。 我爲此使用rank=sourcerank=sink。 在標準圖形中,它很好地工作。graphviz三個行列布局與子圖

但是,當我開始嵌套圖形時,rank=source似乎不起作用。我期望<>(電,開關,房間溫度)的三個輸入被放置在最左邊(因爲它在子圖內發生)以及子圖+狀態(棕色圓圈)和輸入和輸出之間的藍色框。

有沒有指定「等級=中心」(或類似的東西?)

我已經通過了documentation,但沒有找到正確的屬性(並在指定他們)的方式。

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"] 
    } 

} 

有希望的解決方案: 這裏是我想和落得什麼。請注意,綠框在各自子圖的左側如何,紅框在右側。在這之間應該有其他的元素,由graphviz定位。

How it should look like

+0

沒有一個排名=中心,但也有其他方法來獲得節點對準你會的方式喜歡。我有一個關於如何幫助你的想法,但我對於希望的安排很不清楚。你想要左邊的所有綠色框,中間的棕色圓圈和右邊的橙色框?或者你只是以這種方式wan some他們?你可以添加一個你想要的元素排列的粗略草圖嗎? – Craig

+0

我添加了一個圖像來解釋我想要的。在每個盒子裏,綠色框(輸入)應該在左邊,紅色框(輸出)在右邊,其餘的在中心(如'dot'看起來合適)。因此,應該有一種從左到右的「流動」。 – stklik

回答

1

您可以通過添加可見邊的三個輸入連接到圖中的其餘部分,以便在graphviz的佈局算法可以正確計算出它們的排名獲得你想要的佈局。通過將style=invis添加到邊緣格式中,可以使任何邊緣不可見。

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"] 
    } 

} 
} 

隨着2.38版本dot.exe你應該得到這樣一個圖:

Nodes aligned correctly to graph source and sink.

+0

我一直在試圖理解爲什麼解決方案與不可見邊緣一起工作,但不是沒有它們。我的猜測是,如果點連接到圖的其餘部分,點只能對齊節點,但我不確定。 你能告訴我,如果這是正確的? @Craig – stklik

+1

@ S.K.-我對這個問題的理解來自我在回答你的問題時所做的一些測試。 「room_temperature」和「room_temp_in」之間的邊緣導致「dot」將「room_temperature」放置在比「room_temp_in」低一個等級的地方。這似乎忽略了這個節點在最低級別的定位,可能是一個錯誤。它還迫使「電力」和「開關」節點放置在相同的等級上,而不是最低的等級上。如果從原始文件中刪除此邊緣,則會得到所需的佈局,儘管缺少一個邊緣。 – Craig