端口

边的起点和终点

在我们继续讨论布局的相对方向和绝对方向之前，我们先来看一看节点的端口数目和边的条数；

  1. ..................................................
  2. :      :       :       :       :     :     :     :
  3. : 0,0  :north,0:north,1: 3,0   : 4,0 : 5,0 : 6,0 :
  4. :      :left,0 :left,1 :       :     :     :     :
  5. :      :       :       :       :     :     :     :
  6. ..................................................
  7. :      :+-------------+:       :     :     :     :
  8. :west,0:|             |:east,0 : 4,1 : 5,1 : 6,1 :
  9. :back,1:|             |:front,0:     :     :     :
  10. :      :|             |:       :     :     :     :
  11. ........|    Node     |...........................
  12. :      :|             |:       :     :     :     :
  13. :west,1:|             |:east,1 : 4,2 : 5,2 : 6,2 :
  14. :back,1:|             |:front,1:     :     :     :
  15. :      :+-------------+:       :     :     :     :
  16. .................................................
  17. :      :       :       :       :     :     :     :
  18. : 0,3  :south,0:south,1: 3,3   : 4,3 : 5,3 : 6,3 :
  19. :      :right,0:right,1:       :     :     :     :
  20. :      :       :       :       :     :     :     :
  21. .................................................

可以给节点的每一条都命名，之所以每一个边都有两个名字（比如北和左）和整个图或者分组有关；使用绝对方向的话，那么这个边的方向就与节点的方向无关；比如南方永远是南方；但是，如果使用相对方向的话，那么就是相对当前节点的前方；比如右边指的是当前节点前方然后向右；下面是一个具体的例子：

  1. [ C ] -> { start: south; } [ S ] { origin: C; offset: 0,2; }
  2. [ C ] -> { start: north; } [ N ] { origin: C; offset: 0,-2; }
  3. [ C ] -> { start: east; }  [ E ] { origin: C; offset: 2,0; }
  4. [ C ] -> { start: west; }  [ W ] { origin: C; offset: -2,0; }
  1.           +---+
  2.           | N |
  3.           +---+
  4.             ^
  5.             |
  6.             |
  7. +---+     +---+     +---+
  8. | W | <-- | C | --> | E |
  9. +---+     +---+     +---+
  10.             |
  11.             |
  12.             v
  13.           +---+
  14.           | S |
  15.           +---+
  1. [ C ] -> { start: right; } [ R ] { origin: C; offset: 0,2; }
  2. [ C ] -> { start: left; }  [ L ] { origin: C; offset: 0,-2; }
  3. [ C ] -> { start: front; } [ F ] { origin: C; offset: 2,0; }
  4. [ C ] -> { start: back; }  [ B ] { origin: C; offset: -2,0; }
  1.           +---+
  2.           | L |
  3.           +---+
  4.             ^
  5.             |
  6.             |
  7. +---+     +---+     +---+
  8. | B | <-- | C | --> | F |
  9. +---+     +---+     +---+
  10.             |
  11.             |
  12.             v
  13.           +---+
  14.           | R |
  15.           +---+

上面的两个图看起来是一样的，好像使用向右和向南并没有什么区别，但是，如果改变整个图的方向，就会有一些区别了：

  1. graph { flow: down; }
  3. [ C ] -> { start: south; } [ S ] { origin: C; offset: 0,2; }
  4. [ C ] -> { start: north; } [ N ] { origin: C; offset: 0,-2; }
  5. [ C ] -> { start: east; }  [ E ] { origin: C; offset: 2,0; }
  6. [ C ] -> { start: west; }  [ W ] { origin: C; offset: -2,0; }
  1.           +---+
  2.           | N |
  3.           +---+
  4.             ^
  5.             |
  6.             |
  7. +---+     +---+     +---+
  8. | W | <-- | C | --> | E |
  9. +---+     +---+     +---+
  10.             |
  11.             |
  12.             v
  13.           +---+
  14.           | S |
  15.           +---+
  1. graph { flow: down; }
  3. [ C ] -> { start: right; } [ R ] { origin: C; offset: 0,2; }
  4. [ C ] -> { start: left; }  [ L ] { origin: C; offset: 0,-2; }
  5. [ C ] -> { start: front; } [ F ] { origin: C; offset: 2,0; }
  6. [ C ] -> { start: back; }  [ B ] { origin: C; offset: -2,0; }
  1.           +---+
  2.           | L | <+
  3.           +---+  |
  4.                  |
  5.   +---------+    |
  6.   v         |    |
  7. +---+     +---+  |  +---+
  8. | B |  +- | C | -+  | F |
  9. +---+  |  +---+     +---+
  10.        |    |         ^
  11.        |    +---------+
  12.        |
  13.        |  +---+
  14.        +> | R |
  15.           +---+

可以看到第一个图根本没有什么变化；但是第二个图就完全不一样了，由于节点的偏移是固定的（不会随着整个图的方向变化而变化），因此所有的节点的位置不会发生改变，但是，从节点发出的边的方向发生了变化。

总结：如果希望图与方向无关，最嗨使用绝对的方向，比如东南西北；如果希望图可以旋转，那么就使用相对方向。

端口数目

通过设置一个边的起点和终点，可以指导布局器把边放置在那个端口上。

  1. [ Left ] -> { start: left; end: left; } [ Right ]
  1.   +------------+
  2.   |            v
  3. +------+     +-------+
  4. | Left |     | Right |
  5. +------+     +-------+