GraphViz 中的 "Flower" 类图

Question

我正在尝试在 GraphViz 中绘制有限状态传感器。我已经定义了自循环，但是当我绘制它们时，我无法在主节点周围得到一个很好的 "flower"-like 循环分布。

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.

中工作

Answer 1

我很确定这不是您想要的答案，但它确实回答了您的问题。

如您所见，Graphviz 在绘制循环时有一种 "perpendicular" 方法，即它倾向于水平或垂直的主要方向。我不认为你可以避免它。

也就是说，这里是如何将您的图形转换为围绕主节点的兰花状循环分布：

<!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>

GraphViz 中的 "Flower" 类图

A "Flower"-like Graph in GraphViz

graphviz