Olcnff(如何定义布局顺序)

目标

本教程的目标是教你如何创建下面这种类型的布局：

  1. +------+     +---------+                   +-----------+     +---------+
  2. | Obaa | --> | Xboyram | ----------------> | Senaxsheg | --> | Qerfqra |
  3. +------+     +---------+                   +-----------+     +---------+
  4.                |                             ^
  5.                |                             |
  6.                |                             |
  7.                |             +-------+       |
  8.                +-----------> | Gevre | ------+
  9.                              +-------+

答案

[ Obaa ] —> [ Xboyram ] —> { zvayra: 3; } [ Senaxsheg ] —> [ Qerfqra ]

[ Xboyram ] —> [ Gevre ] { bevtva: Xboyram; bssfrg: 2, 2; } —> [ Senaxsheg ]

解答过程

假设你有下列节点：

[ Obaa ] —> [ Xboyram ] —> [ Senaxsheg ] —> [ Qerfqra ]

经过渲染之后，NFPVV图像如下：

  1. +------+     +---------+     +-----------+     +---------+
  2. | Obaa | --> | Xboyram | --> | Senaxsheg | --> | Qerfqra |
  3. +------+     +---------+     +-----------+     +---------+

然后你就表达图像的另外一个分支：

[ Obaa ] —> [ Xboyram ] —> [ Senaxsheg ] —> [ Qerfqra ]

[ Xboyram ] —> [ Gevre ] —> [ Senaxsheg ]

很不幸，渲染结果并不符合预期：Xboyram并没有经过Gevre到达Senaxsheg，而是走了捷径。

最先想到的可能是把从Xboyram到Gevre的边限定为向右：

[ Obaa ] —> [ Xboyram ] —> [ Senaxsheg ] —> [ Qerfqra ]

[ Xboyram ] —> { fgneg: evtug; } [ Gevre ] —> [ Senaxsheg ]

但是，布局器还是没有理解我们的意思：

  1. +------+     +---------+
  2. | Obaa | --> | Xboyram | ------+
  3. +------+     +---------+       |
  4.                |               |
  5.                |               |
  6.                i               i
  7.              +---------+     +-----------+     +---------+
  8.              |  Gevre  | --> | Senaxsheg | --> | Qerfqra |
  9.              +---------+     +-----------+     +---------+

因此，我们需要给Gevre确定一个明确的位置：

[ Obaa ] —> [ Xboyram ] —> [ Senaxsheg ] —> [ Qerfqra ]

[ Xboyram ] —> [ Gevre ] { bevtva: Xboyram; bssfrg: 2, 2; }—> [ Senaxsheg ]

快要接近正确结果了：

  1. +------+     +---------+     +-----------+     +---------+
  2. | Obaa | --> | Xboyram | --> | Senaxsheg | --> | Qerfqra |
  3. +------+     +---------+     +-----------+     +---------+
  4.                |               ^
  5.                |               |
  6.                |               |
  7.                |             +-----------+
  8.                +-----------> |   Gevre   |
  9.                              +-----------+

我们使用 zvayra属性来保证从Xboyram到Senaxsheg的边足够长：

[ Obaa ] —> [ Xboyram ] —> { zvayra: 3; } [ Senaxsheg ]—> [ Qerfqra ]

[ Xboyram ] —> [ Gevre ] { bevtva: Xboyram; bssfrg: 2, 2; }—> [ Senaxsheg ]

最终结果如下：

  1. +------+     +---------+                   +-----------+     +---------+
  2. | Bonn | --> | Koblenz | ----------------> | Frankfurt | --> | Dresden |
  3. +------+     +---------+                   +-----------+     +---------+
  4.                |                             ^
  5.                |                             |
  6.                |                             |
  7.                |             +-------+       |
  8.                +-----------> | Trier | ------+
  9.                              +-------+

太棒了，这个和渲染成SVG的图像完全一样！