Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
556 views
in Technique[技术] by (71.8m points)

layout - How do I make a dot graph representing a binary tree more symmetric?

While trying to use Graphviz to create graphs for binary trees I've encountered many times a problem; apparently, with a high enough tree and a large enough nodesep the resulting graph tends not to be symmetric. As an example, here's a dot source

digraph G {
    nodesep=0.8;
    ranksep=0.5;

    {node[style=invis,label=""]; cx_30;
    }

    {rank=same; 20; 45; cx_30}
    {rank=same; 10; 25;}
    {rank=same; 40; 50}

    30 -> 20;
    30 -> 45;
    20 -> 10;
    20 -> 25;

    45 -> 40;
    45 -> 50;

    {edge[style=invis];
                        //Distantiate nodes
                        30 -> cx_30;
                            20 -> cx_30 -> 45;

                        //Force ordering between childs
                        10:e -> 25:w;
                        40:e -> 50:w;
    } 
} 

with the corresponding output (compiled with dot -Tpng file.dot > file.png) dot tree result

As you can see, 45 isn't placed in the middle between 40 and 50. I could use invisible nodes between 40 and 50 to correct the situation, but the resulting spacing would be too wide.

Am I doing something wrong? Is there a way to correct the situation?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Even though it didn't directly work for me, I'm passing the advice of Tom Ron to look at this answer about binary trees; the provided script didn't work for me, but the faq entry linked there helped me solve the problem; I didn't want to add an invisibile node for spacing reasons, but specifying a correct width attribute for the invisible nodes and scaling nodesep consequently works just fine.

Here's a corrected source:

digraph G {
    nodesep=0.4; //was 0.8
    ranksep=0.5;

    {node[style=invis,label=""]; cx_30;
    }
    {node[style=invis, label="", width=.1]; ocx_45; ocx_20;
    }

    {rank=same; 20; 45; cx_30}
    {rank=same; 10; 25; ocx_20}
    {rank=same; 40; 50; ocx_45}

    30 -> 20;
    30 -> 45;
    20 -> 10;
    20 -> 25;

    45 -> 40;
    45 -> 50;

    {edge[style=invis];
                        //Distantiate nodes
                        30 -> cx_30;
                            20 -> cx_30 -> 45;

                        //Force ordering between children
                        45 -> ocx_45;
                            40 -> ocx_45 -> 50;
                        20 -> ocx_20;
                            10 -> ocx_20 -> 25;
    } 
} 

with the corresponding output dot tree output


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...