“花”样图中的GraphViz

我想要绘制在GraphViz的有限状态转换器。我已经定义了自循环，但是当我绘制它们时，我无法在主节点周围获得很好的“花”状循环分布。“花”样图中的GraphViz

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 
}

我的情节看起来像下面

有没有一种方法，我可以旋转始发，并在西北，东南，西南，东北终止自成回路的边缘方向是什么？我曾尝试orientation和rotate命令，但我不能让他们在dot和neato工作。

来源

2017-08-28 Ryan R. Rosario

[定位]（HTTP：//www.graphviz .org/doc/info/attrs.html＃a：orientation）仅适用于节点。 [旋转]（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

回答

相关问题