2017-09-07 10 views
0

enter image description here graphvizのサーコエンジンで特定のノードのエッジ長をどのように減らすことができますか。ここには、19ノードと22エッジの単純なドットファイルがあります。 次のコマンドを使用してコンパイルしました。サーキットエンジンgraphvizの特定のノード間のエッジ長を減らす方法

circo "input-filename" -Gstart = 5 -Gsize = 1,2! -Gdpi = 300 -Teps -o「出力ファイル名」

digraph graphname { 
node [fontname = "times-roman-bold",fontsize=12]; 
    edge [fontname = "times-roman-bold",fontsize=12]; 
    rankdir=LR; 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
1 -> 2 
2 -> 3 
3 -> 5 
3 -> 4 
4 -> 5 
5 -> 6 
6 -> 8 
6 -> 7 
7 -> 8 
8 -> 9 
9 -> 11 
9 -> 10 
10 -> 14 
11 -> 12 
12 -> 14 
12 -> 13 
13 -> 17 
14 -> 15 
15 -> 16 
15 -> 17 
16 -> 19 
17 -> 18 
} 

により要件に、我々は唯一のサーコエンジンを使用してコンパイルする必要があります。ここで私は生成された出力を添付しています。そして、私の疑問は、ノード8とノード9(8→9)のエッジの間のエッジ長をどのように減らすことができるかです。助けてください。ありがとうございます。

答えて

0

サーコでエッジの長さに直接影響することはできませんが、レイアウトに影響を与えるために目に見えないノードやエッジを追加できます。

ここでは、あなたの図の最後のノードにすべてのノードから見えないエッジを追加した場合に何が起こるかを示す例です:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<body> 
 
<script src="//d3js.org/d3.v4.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/viz.js"></script> 
 
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script> 
 
<div id="graph" style="text-align: center;"></div> 
 
<script> 
 

 
var dots = [ 
 
    ` 
 
digraph graphname { 
 
    graph [] 
 
    node [fontname = "times-roman-bold",fontsize=12]; 
 
    edge [fontname = "times-roman-bold",fontsize=12]; 
 
    rankdir=LR; 
 
    1 
 
    2 
 
    3 
 
    4 
 
    5 
 
    6 
 
    7 
 
    8 
 
    9 
 
    10 
 
    11 
 
    12 
 
    13 
 
    14 
 
    15 
 
    16 
 
    17 
 
    18 
 
    19 
 
    1 -> 2 
 
    2 -> 3 
 
    3 -> 5 
 
    3 -> 4 
 
    4 -> 5 
 
    5 -> 6 
 
    6 -> 8 
 
    6 -> 7 
 
    7 -> 8 
 
    8 -> 9 
 
    9 -> 11 
 
    9 -> 10 
 
    10 -> 14 
 
    11 -> 12 
 
    12 -> 14 
 
    12 -> 13 
 
    13 -> 17 
 
    14 -> 15 
 
    15 -> 16 
 
    15 -> 17 
 
    16 -> 19 
 
    17 -> 18 
 
} 
 
    `, ` 
 
digraph graphname { 
 
    graph [] 
 
    node [fontname = "times-roman-bold",fontsize=12]; 
 
    edge [fontname = "times-roman-bold",fontsize=12]; 
 
    rankdir=LR; 
 
    1 
 
    2 
 
    3 
 
    4 
 
    5 
 
    6 
 
    7 
 
    8 
 
    9 
 
    10 
 
    11 
 
    12 
 
    13 
 
    14 
 
    15 
 
    16 
 
    17 
 
    18 
 
    19 
 
    1 -> 2 
 
    2 -> 3 
 
    3 -> 5 
 
    3 -> 4 
 
    4 -> 5 
 
    5 -> 6 
 
    6 -> 8 
 
    6 -> 7 
 
    7 -> 8 
 
    8 -> 9 
 
    9 -> 11 
 
    9 -> 10 
 
    10 -> 14 
 
    11 -> 12 
 
    12 -> 14 
 
    12 -> 13 
 
    13 -> 17 
 
    14 -> 15 
 
    15 -> 16 
 
    15 -> 17 
 
    16 -> 19 
 
    17 -> 18 
 
// 
 
    2 -> 19 [color="red"] 
 
    3 -> 19 [color="red"] 
 
    4 -> 19 [color="red"] 
 
    5 -> 19 [color="red"] 
 
    6 -> 19 [color="red"] 
 
    7 -> 19 [color="red"] 
 
    8 -> 19 [color="red"] 
 
    9 -> 19 [color="red"] 
 
    10 -> 19 [color="red"] 
 
    11 -> 19 [color="red"] 
 
    12 -> 19 [color="red"] 
 
    13 -> 19 [color="red"] 
 
    14 -> 19 [color="red"] 
 
    15 -> 19 [color="red"] 
 
    16 -> 19 [color="red"] 
 
    17 -> 19 [color="red"] 
 
    18 -> 19 [color="red"] 
 
    19 -> 19 [color="red"] 
 
} 
 
    `, ` 
 
digraph graphname { 
 
    graph [] 
 
    node [fontname = "times-roman-bold",fontsize=12]; 
 
    edge [fontname = "times-roman-bold",fontsize=12]; 
 
    rankdir=LR; 
 
    1 
 
    2 
 
    3 
 
    4 
 
    5 
 
    6 
 
    7 
 
    8 
 
    9 
 
    10 
 
    11 
 
    12 
 
    13 
 
    14 
 
    15 
 
    16 
 
    17 
 
    18 
 
    19 
 
    1 -> 2 
 
    2 -> 3 
 
    3 -> 5 
 
    3 -> 4 
 
    4 -> 5 
 
    5 -> 6 
 
    6 -> 8 
 
    6 -> 7 
 
    7 -> 8 
 
    8 -> 9 
 
    9 -> 11 
 
    9 -> 10 
 
    10 -> 14 
 
    11 -> 12 
 
    12 -> 14 
 
    12 -> 13 
 
    13 -> 17 
 
    14 -> 15 
 
    15 -> 16 
 
    15 -> 17 
 
    16 -> 19 
 
    17 -> 18 
 
// 
 
    2 -> 19 [color="none"] 
 
    3 -> 19 [color="none"] 
 
    4 -> 19 [color="none"] 
 
    5 -> 19 [color="none"] 
 
    6 -> 19 [color="none"] 
 
    7 -> 19 [color="none"] 
 
    8 -> 19 [color="none"] 
 
    9 -> 19 [color="none"] 
 
    10 -> 19 [color="none"] 
 
    11 -> 19 [color="none"] 
 
    12 -> 19 [color="none"] 
 
    13 -> 19 [color="none"] 
 
    14 -> 19 [color="none"] 
 
    15 -> 19 [color="none"] 
 
    16 -> 19 [color="none"] 
 
    17 -> 19 [color="none"] 
 
    18 -> 19 [color="none"] 
 
    19 -> 19 [color="none"] 
 
} 
 
    ` 
 
]; 
 

 
var dotIndex = 0; 
 
var graphviz = d3.select("#graph").graphviz(); 
 

 
function render() { 
 
    var dot = dots[dotIndex % dots.length]; 
 
    var transition1 = d3.transition() 
 
     .delay(1000) 
 
     .duration(dotIndex == 0 ? 1000 : 5000); 
 
    graphviz 
 
     .tweenShapes(false) 
 
     .engine("circo") 
 
     .dot(dot) 
 
     .transition(transition1) 
 
     .render(); 
 
    dotIndex += 1; 
 

 
    transition1 
 
     .transition() 
 
     .duration(0) 
 
     .on('end', function() { 
 
      if (dotIndex != dots.length) { 
 
       render(); 
 
      } 
 
     }); 
 
} 
 

 
render(); 
 

 
</script>

関連する問題