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

Question

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

1k views Asked by ksn At 14 September 2024 at 14:27

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.

Original Q&A

There are 1 answers

**magjac** · Answer 1 · 2017-09-18 05:18:54

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/[email protected]/viz.js"></script>
<script src="https://unpkg.com/[email protected]/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>

TechQA.

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

There are 1 answers

Related Questions in GRAPHVIZ

Related Questions in DOT

Related Questions in CIRCOS

Popular Questions

Popular Tags

Trending Questions