1

在此处输入图像描述如何减少 graphviz circo 引擎中特定节点的边缘长度。这是 19 个节点和 22 个边的简单点文件。我使用命令编译：

circo“输入文件名”-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
}

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

4

1 回答 1

3

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

这是一个示例，显示了如果将不可见边从每个节点添加到图表中的最后一个节点会发生什么：

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

于 2017-09-18T05:18:54.580 回答