如何使用graphviz将节点置于其他节点之上?

8yparm6h  于 2021-08-20  发布在  Java
关注(0)|答案(1)|浏览(391)

我正在尝试设计一种具有特定颜色和形状的非常特定类型的图形,但我无法判断这是否可以通过graphviz实现。
我的目标是绘制一个有向图,其中每个节点:
由3个水平排列的小盒子组成(
striped rectanglerecord , rounded )
包含3个 labels 因此
充满了梯度
在中间框的顶部有一个黑色方形节点
示例(已手动放置所有黑框):

我已经达到了第三个要求,但我正在努力实现最后一个要求。如何放置方形节点( rect , square , box ,等等)放置在第一组节点(彩色矩形)的顶部,以使它们完全适合它们要覆盖的中间框的尺寸?这在graphviz身上可能吗?
示例代码(python):

  1. from graphviz import Digraph
  2. # Dictionary storing relations between nodes
  3. d = {0: set([1, 2, 3]),
  4. 1: set([4, 5, 6]),
  5. 2: set([7, 8, 9, 10]),
  6. 3: set([0]),
  7. 4: set([]),
  8. 5: set([]),
  9. 6: set([]),
  10. 7: set([]),
  11. 8: set([0]),
  12. 9: set([]),
  13. 10: set([])}
  14. # List of node labels (3 labels per node)
  15. P = [('S', 'M', 'S'),
  16. ('M', 'S', 'L'),
  17. ('M', 'S', 'S'),
  18. ('M', 'S', 'M'),
  19. ('S', 'L', 'L'),
  20. ('S', 'L', 'M'),
  21. ('S', 'L', 'X'),
  22. ('S', 'S', 'S'),
  23. ('S', 'S', 'M'),
  24. ('S', 'S', 'L'),
  25. ('S', 'S', 'X')]
  26. # Dictionary storing the colors corresponding to each label
  27. c = {'S':'olivedrab1',
  28. 'M':'mediumturquoise',
  29. 'L':'deepskyblue',
  30. 'X':'palevioletred1'}
  31. # Create a "directed graph" with general node and edge attributes
  32. G = Digraph(node_attr={'shape':'record',
  33. 'style':'rounded, filled',
  34. 'color':'white',
  35. 'height':'0.1',
  36. 'fontcolor':'white'},
  37. edge_attr={'color':'grey',
  38. 'arrowhead':'vee'}
  39. )
  40. G.attr('graph', bgcolor='transparent')
  41. # 1st pass: create all nodes (0 to 10)
  42. for k in d:
  43. l1, l2, l3 = P[k]
  44. # set specific attribute to each node (label & colors)
  45. G.attr('node', label='{} | {} | {}'.format(l1, ' ', l2), fillcolor='{}:{}'.format(c[l1], c[l2]))
  46. G.node(str(k))
  47. # 2nd pass: create edges between nodes
  48. for k in d:
  49. l1, l2, l3 = P[k]
  50. for i in d[k]:
  51. if i in d:
  52. G.edge(str(k), str(i))
  53. # Then, how to overlap black square nodes ?
xytpbqjk

xytpbqjk1#

我认为在dot/graphviz中不可能强制节点将一个节点叠加到另一个节点上;我想这可能有点挫败了可视化绘制图形的全部意义。
此代码使用html(-like)形状作为节点;这些描述了一个三单元格表格,左右两侧为渐变色,中间为纯黑色和白色文本。

  1. import graphviz
  2. # Dictionary storing relations between nodes
  3. d = {0: set([1, 2, 3]),
  4. 1: set([4, 5, 6]),
  5. 2: set([7, 8, 9, 10]),
  6. 3: set([0]),
  7. 4: set([]),
  8. 5: set([]),
  9. 6: set([]),
  10. 7: set([]),
  11. 8: set([0]),
  12. 9: set([]),
  13. 10: set([])}
  14. # List of node labels (3 labels per node)
  15. P = [('S', 'M', 'S'),
  16. ('M', 'S', 'L'),
  17. ('M', 'S', 'S'),
  18. ('M', 'S', 'M'),
  19. ('S', 'L', 'L'),
  20. ('S', 'L', 'M'),
  21. ('S', 'L', 'X'),
  22. ('S', 'S', 'S'),
  23. ('S', 'S', 'M'),
  24. ('S', 'S', 'L'),
  25. ('S', 'S', 'X')]
  26. # Dictionary storing the colors corresponding to each label
  27. c = {'S':'olivedrab1:grey',
  28. 'M':'mediumturquoise:gray',
  29. 'L':'deepskyblue:gray',
  30. 'X':'palevioletred1:gray'}
  31. # Create a "directed graph" with general node and edge attributes
  32. G = graphviz.Digraph(
  33. format='svg'
  34. ,edge_attr={'color':'grey',
  35. 'arrowhead':'vee'}
  36. )
  37. G.attr('graph', bgcolor='transparent')
  38. # 1st pass: create all nodes (0 to 10)
  39. for k in d:
  40. l1, l2, l3 = P[k]
  41. G.node(name=str(k),shape='plain',label=f'''<
  42. <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" BGCOLOR="gray">
  43. <TR>
  44. <TD BGCOLOR="{c[l1]}" GRADIENTANGLE="45">{l1}</TD>
  45. <TD BGCOLOR="black"><FONT COLOR="white">{l2}</FONT></TD>
  46. <TD BGCOLOR="{c[l3]}" GRADIENTANGLE="135">{l3}</TD>
  47. </TR>
  48. </TABLE>
  49. >
  50. '''
  51. )
  52. # 2nd pass: create edges between nodes
  53. for k in d:
  54. l1, l2, l3 = P[k]
  55. for i in d[k]:
  56. if i in d:
  57. G.edge(str(k), str(i))
  58. G.view()

结果:

笔记:
当shape设置为“plain”时,节点获取html的形状
颜色梯度在单元格中指定 <TD> 作为 BGCOLOR=“colour1:colour2” 渐变的Angular 也在单元格中指定 <TD> 例如。 GRADIENTANGLE=“45” 有关html节点的详细信息,请参见:http://graphviz.org/doc/info/shapes.html#gradientangle

展开查看全部

相关问题