当前位置:   article > 正文

Graphviz 排版思路 Graphviz 如何控制节点位置_graphviz 布局

graphviz 布局

有个画图需求是需要生成特定排版的关系图。

graphviz 对于一般情况都是自动排的,有时候会抽风,比如这种情况:

而我们想要这样:

对初学者提一下 ,如何实现 3  2 5 ,1467 从左到右排列呢?待会会顺便讲解这个的实现方法。

可以看到 3 就是不能在 2 的左边 。而代码中加入了限制:

  1. subgraph {
  2. rankdir = LR;
  3. rank = same;
  4. s3 -> s2 [style = invis;];
  5. s2 -> s5 [style = invis;];
  6. }

这里 invis 边就是用来控制位置用的。因此我们继续加入一些限制来吧这个 3 移动回到 2 的左边。

  1. subgraph {
  2. s1 -> s4 [style = invis;];
  3. s4 -> s6 [style = invis;];
  4. s6 -> s7 [style = invis;];
  5. s1 -> start [style = invis;];
  6. }
  7. subgraph {
  8. rankdir = LR;
  9. rank = same;
  10. start [style = invis;];
  11. start -> s3 [style = invis;];
  12. s3 -> s2 [style = invis;];
  13. s3 -> s5 [style = invis;];
  14. }

原理是通过添加额外的节点和边(仅用于排版,输出时隐藏)以及 rank 限制条件,来控制生成节点尽量满足需要的排版。不过这个实际和算法执行起来算出来的效果有关。

上图中框起来的是  invis 边。

下面进行讲解:

红色橙色:为了限制节点的顺序是水平的 3 2 5 排序摆放。1 4 6 7 水平顺序摆放,否则会错乱,graphviz 会自己想怎么排就怎么拍(设置 rankdir = LR 能生效的前提是他们节点之间有有向边!

绿色:为了把 3 从 graphviz 糟糕算法生成的右边拉回到左边,至于为什么会这样,其实和 graphviz 用的算法和选择策略有关,可以参照Graphviz中的资料,实际就是算法因为是比较通用的,在这个 case 下,算法恰好生成的时候认为 3 再右边更加的均匀。

实际效率需求的生产中,我们还是用 GUI 工具吧,这种除了要通过代码生成的情景或者大量的数据下之外,比如这种需要对特定节点特定边的位置进行控制的,没有太大必要去用脚本工具画图。。

附录,完整代码:

  1. digraph b {
  2. overlap = false;
  3. splines = true;
  4. s8 [label = 8;group = g1;];
  5. s2 [label = 3;group = g2;];
  6. s3 [label = 2;group = g2;];
  7. s5 [label = 5;group = g2;];
  8. s1 [label = 1;group = g3;];
  9. s4 [label = 4;group = g3;];
  10. s6 [label = 6;group = g3;];
  11. s7 [label = 7;group = g3;];
  12. s8 -> s3 [dir = back;];
  13. s1 -> s3;
  14. s3 -> s6 [dir = back;];
  15. s4 -> s3;
  16. s7 -> s3;
  17. s2 -> s3;
  18. s3 -> s2;
  19. s3 -> s5;
  20. s5 -> s3;
  21. subgraph a {
  22. rankdir = TB;
  23. rank = same;
  24. s2;
  25. s3;
  26. s5;
  27. }
  28. subgraph {
  29. s1 -> s4 [style = invis;];
  30. s4 -> s6 [style = invis;];
  31. s6 -> s7 [style = invis;];
  32. s1 -> start [style = invis;];
  33. }
  34. subgraph {
  35. rankdir = LR;
  36. rank = same;
  37. start [style = invis;];
  38. start -> s2 [style = invis;];
  39. s2 -> s3 [style = invis;];
  40. s3 -> s5 [style = invis;];
  41. }
  42. subgraph c {
  43. rankdir = TB;
  44. rank = same;
  45. s1;
  46. s4;
  47. s6;
  48. s7;
  49. }
  50. subgraph d {
  51. rank = same;
  52. s8;
  53. }
  54. rank = same;
  55. }

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号