社区首页 >问答首页 >Graphviz -页面和排名不受尊重

问Graphviz -页面和排名不受尊重
EN

Stack Overflow用户

提问于 2018-06-29 01:52:57

回答 1查看 310关注 0票数 0

在这里输入图像描述我正在学习GraphViz，我正在努力解决一些基本的问题。我有两个子图，应该能够显示基本的节点和之间的链接，请参见代码：

digraph G {
graph [rankdir="TB", splines=ortho, nodesep=2, ranksep=2.5, fontsize=18, fontname="Verdana"];
node [shape=record, height=3, width=3];
rankdir = TB;


subgraph cluster_0 {    
    node [style=filled, color=lightgrey, fontsize=18, fontname="Verdana"];
    label = "DMZ 1";
    PWI -> PWE -> PWI
}

subgraph cluster_1 {
    node [style=filled, color=lightgrey, fontsize=18, fontname="Verdana"];
    label = "Trusted Zone EBC" ;
    PR1 -> PWI [headlabel="test text", labeldistance=2.5] 
    PWI -> PR1  
    PR1 -> PWE  
    PWE -> PR1  
    PWI -> PWE -> PWI  
    PFI -> PWE  
    PFI -> PWI  
    PWE -> PFI  
    PWI -> PFI  
    PBW -> PWI  
    PBW -> PWE  
    PWI -> PBW  
    PWE -> PBW  
    PSM -> PWE  
    PSM -> PWI  
    PWE -> PSM  
    PWI -> PSM  
    {rank = same; PR1; PFI; PSM; PBW}
    {rank = same; PWI}
    {rank = same; PWE}
}

}

这导致了下面的..。我在这里输入图像描述的边缘是“画布”吗?如果是，我可以增加它吗？为什么在最高级别与最低级别相同的情况下，最高级别与最低级别相同，而中级级别高于他们时，这些级别不会受到尊重？

谢谢!

https://i.stack.imgur.com/meU6p.png

image-size

configuration

graphviz

dot

回答 1

Stack Overflow用户

发布于 2018-07-14 18:55:02

不，你没有碰到“画布”的边缘，因为默认的是展开它以适合你的图形。

图中排名的问题是，节点之间的边是双向的。由于Graphviz认为边缘的左侧比右侧具有更高的排名，因此所有这些边缘都会使Graphviz感到困惑。

相反，如果你总是创建从较高排名(根据你想要的)到较低排名节点的边，并使用dir属性来指定边应该指向反向，如下所示：n1 -> n2 [dir=back]，Graphviz将获得对节点排名的一致感知，并尊重您的预期排名。

也许这更符合你的需求：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/viz.js@1.8.2/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.4.2/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

var dotSrc = `
digraph G {
graph [rankdir="TB", splines=ortho, nodesep=2, ranksep=2.5, fontsize=18, fontname="Verdana"];
node [shape=record, height=3, width=3];
rankdir = TB;


subgraph cluster_0 {    
    node [style=filled, color=lightgrey, fontsize=18, fontname="Verdana"];
    label = "DMZ 1";
    PWE -> PWI
    PWE -> PWI [dir=back]
}

subgraph cluster_1 {
    node [style=filled, color=lightgrey, fontsize=18, fontname="Verdana"];
    label = "Trusted Zone EBC" ;
    PWI -> PR1 [headlabel="test text", labeldistance=2.5 dir=back] 
    PWI -> PR1  
    PWE -> PR1 [dir=back]
    PWE -> PR1  
    PWE -> PWI [dir=back]
    PWE -> PWI  
    PWE -> PFI [dir=back]
    PFI -> PWI  
    PWE -> PFI  
    PFI -> PWI [dir=back]
    PWI -> PBW [dir=back]   
    PWE -> PBW [dir=back]
    PWI -> PBW  
    PWE -> PBW  
    PWE -> PSM [dir=back]
    PWI -> PSM [dir=back]
    PWE -> PSM  
    PWI -> PSM  
    {rank = same; PR1; PFI; PSM; PBW}
    {rank = same; PWI}
    {rank = same; PWE}
}
}
`;

d3.select("#graph").graphviz()
  .renderDot(dotSrc);

</script>