How to reduce edge length between specific nodes in circo engine graphviz

Question

enter image description hereHow can I reduce the edge length of specific nodes in circo engine of graphviz. Here is the simple dot file of 19 nodes and 22 edges. I compiled using the command:

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
}

Due to requirements, we need to compile using circo engine only. Here I am attaching the output generated. And my doubt is how can I reduce the edge length between nodes 8 and 9 (8 -> 9) edge. Please help. Thanks a lot in advance.

score 3 · Answer 1 · answered Sep 18 '17 at 05:18

You can't directly influence edge length in circo, but you can add invisible nodes or edges to influence the layout.

Here's an example showing what happens if you add invisible edges from every node to the last node in your diagram:

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

How to reduce edge length between specific nodes in circo engine graphviz

1 Answers1