Question

enter image description here如何减少graphviz的circo引擎中特定节点的边长。这是19个节点和22个边缘的简单点文件。我使用命令编译：

circo“input-filename”-Gstart = 5 -Gsize = 1,2！ -Gdpi = 300 -Teps -o“output-filename”

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
}

由于要求，我们只需要使用circo引擎进行编译。这里我附加了生成的输出。我的疑问是如何减少节点8和9（8-> 9）边缘之间的边长。请帮忙。非常感谢提前。

Answer 1

您不能直接影响circo中的边长，但您可以添加不可见的节点或边来影响布局。

以下是一个示例，说明如果将每个节点的不可见边添加到图中的最后一个节点会发生什么：

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js"></script>
<script src="https://unpkg.com/d3-graphviz@0.1.2/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>

＆＃13;

如何减少circo引擎graphviz中特定节点之间的边长

1 个答案: