Graphviz - Squished на странице и звание не уважается - PullRequest
Новая
       23

Graphviz - Squished на странице и звание не уважается

0 голосов
/ 29 июня 2018

[введите описание изображения здесь] [1] Я только изучаю 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}
}

}

Что приводит к приведенному ниже. Ударяю ли я по краям [введите описание изображения здесь] [2] «холст», если да, могу ли я его увеличить? И почему ранги не соблюдаются там, где высший ранг показан на том же уровне, что и низший ранг, а также средний ранг, находящийся над ними?

Спасибо!

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

1 Ответ

0 голосов
/ 14 июля 2018

Нет, вы не ударяете по краям «холста», потому что по умолчанию он расширяется, чтобы соответствовать вашему графику.

Проблема с рангами в вашем графике заключается в том, что у вас есть ребра, проходящие в обоих направлениях между узлами. Поскольку 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...