GraphVizの "Flower"のようなグラフ

私はGraphVizに有限状態変換器をプロットしようとしています。私はすでに自己ループを定義していますが、それらをプロットすると、メインノードの周りに素敵な「花」のようなループの分布を得ることができません。GraphVizの "Flower"のようなグラフ

digraph G { 
    size="8,5" 
    splines=true; 
    nodesep=1.0; 
    node [shape=ellipse,width=1,height=1]; 
    0 [peripheries=2]; 
    0:n -> 0:n [label=" A:A" minlen=5.0 rotate=45] 
    0:ne -> 0:ne [headlabel=" A:B" minlen=5.0]; 
    0:e -> 0:e [label=" B:A" minlen=5.0]; 
    0:se -> 0:se [label=" B:A" labeldistance=-8 minlen=5.0]; 
    0:s -> 0:s [label=" *e*:A" minlen=5.0]; 
    0:sw -> 0:sw [label=" *e*:B" minlen=5.0]; 
    0:w -> 0:w [label=" B:*e*" minlen=5.0]; 
    0:nw -> 0:nw [label=" A:*e*" minlen=5.0]; 
overlap=false 
}

私のプロットは、私はNW、SE、SW、NEから発信および着信自己ループのエッジの向きを回転させることができる方法があり、以下の

のように見えますか？私はorientationとrotateコマンドを試しましたが、dotとneatoで動作するようにはできません。

出典

2017-08-28 Ryan R. Rosario

[向き]（HTTP：//www.graphviz .org/doc/info/attrs.html＃a：orientation）はノードのみで動作します。 [rotate]（http://www.graphviz.org/doc/info/attrs.html#d:rotate）は、グラフ全体に対してのみ機能します。 – magjac

私はこれがあなたが望む答えではないと確信していますが、あなたの質問に答えてくれます。

ご覧のとおり、Graphvizには、ループを描画する際に一種の「垂直」アプローチがあります。つまり、水平または垂直方向のメジャー方向を優先します。私はあなたがそれを避けることはできないと思います。ここでは、言った

はメインノードの周りにループの蘭のような分布にあなたのグラフを変換する方法である：

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<body> 
 
<script src="//d3js.org/d3.v4.min.js"></script> 
 
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script> 
 
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.1.2/d3-graphviz.min.js"></script> 
 
<div id="graph" style="text-align: center;"></div> 
 
<script> 
 

 
var dots = [ 
 
    ` 
 
digraph G { 
 
    size="8,5" 
 
    splines=true; 
 
    nodesep=1.0; 
 
    node [shape=ellipse,width=1,height=1, orientation=22.5, group="hej"]; 
 
    0 [peripheries=2]; 
 
    0:n -> 0:n [id=1 label=" A:A" minlen=0.0 rotate=45]; 
 
    0:ne -> 0:ne [id=2 headlabel=" A:B" minlen=0.0]; 
 
    0:e -> 0:e [id=3 label=" B:A" minlen=0.0]; 
 
    0:se -> 0:se [id=4 label=" B:A" labeldistance=-8 minlen=0.0]; 
 
    0:s -> 0:s [id=5 label=" *e*:A" minlen=0.0]; 
 
    0:sw -> 0:sw [id=6 label=" *e*:B" minlen=0.0]; 
 
    0:w -> 0:w [id=7 label=" B:*e*" minlen=0.0]; 
 
    0:nw -> 0:nw [id=8 label=" A:*e*" minlen=0.0]; 
 
    overlap=false 
 
} 
 
    `, ` 
 
digraph G { 
 
    size="8,5" 
 
    splines=true; 
 
    nodesep=1.0; 
 
    node [shape=ellipse,width=1,height=1, orientation=22.5, group="hej"]; 
 
    0 [peripheries=2]; 
 
    0:n -> 0:n [id=1 label=" A:A" minlen=0.0 rotate=45]; 
 
    0:nw -> 0:ne [id=2 headlabel=" A:B" minlen=0.0]; 
 
    0:e -> 0:e [id=3 label=" B:A" minlen=0.0]; 
 
    0:ne -> 0:se [id=4 label=" B:A" labeldistance=-8 minlen=0.0]; 
 
    0:s -> 0:s [id=5 label=" *e*:A" minlen=0.0]; 
 
    0:se -> 0:sw [id=6 label=" *e*:B" minlen=0.0]; 
 
    0:w -> 0:w [id=7 label=" B:*e*" minlen=0.0]; 
 
    0:sw -> 0:nw [id=8 label=" A:*e*" minlen=0.0]; 
 
    overlap=false 
 
} 
 
    ` 
 
]; 
 

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

 
function render() { 
 
    var dot = dots[dotIndex % dots.length]; 
 
    var transition1 = d3.transition() 
 
     .delay(1000) 
 
     .duration(1000 + 4000 * dotIndex); 
 
    graphviz 
 
     .tweenShapes(false) 
 
     .engine("dot") 
 
     .keyMode("id") 
 
     .dot(dot) 
 
     .transition(transition1) 
 
     .render(); 
 
    dotIndex += 1; 
 

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

 
render(); 
 

 
</script>

出典

2017-09-12 05:17:53 magjac

GraphVizの "Flower"のようなグラフ

答えて

関連する問題