How I can draw the tree with values stored in nodes with graphviz?

Question

I need to draw tree looks like this (with values associated with some nodes):

Requested view for tree

But I find only the way to draw tree like next: enter image description here

I try to use subgraphs, and nested subgraphs, but there is no effect needed. Currently, I use the next gv script:

digraph "test-graph" {
    graph [rankdir=TB dpi=96]
    subgraph n0 {
        rank=same;
        "0_0" [ label = "a" ];
    }
    subgraph n1 {
        rank=same;
        "1_0" [ label = "b" ];
        "1_1" [ label = "d" ];
        "1_2" [ label = "e" ];
        subgraph {
            "v3" [ label = "3", shape = "box" ];
            "1_1"->"v3" [ dir = none, constraint = false ];
            }
    }
    subgraph n2 {
        rank=same;
        "2_0" [ label = "g" ];
    }
    subgraph n3 {
        rank=same;
        "3_0" [ label = "a" ];
        "3_1" [ label = "b" ];
        "3_2" [ label = "c" ];
        subgraph {
            "v2" [ label = "2", shape = "box" ];
            "3_0"->"v2" [ dir = none, constraint = false ];
            "v0" [ label = "0", shape = "box" ];
            "3_1"->"v0" [ dir = none, constraint = false ];
            "v5" [ label = "5", shape = "box" ];
            "3_2"->"v5" [ dir = none, constraint = false ];
           }
    }
    subgraph n4 {
        rank=same;
        "4_0" [ label = "f" ];
        subgraph {
            "v1" [ label = "1", shape = "box" ];
            "4_0"->"v1" [ dir = none, constraint = false ];
            }
    }
    subgraph n5 {
        rank=same;
        "5_0" [ label = "c" ];
        subgraph {
            "v4" [ label = "4", shape = "box" ];
            "5_0"->"v4" [ dir = none, constraint = false ];
            }
    }
    "start"->"0_0";
    "0_0"->"1_0";
    "0_0"->"1_1";
    "0_0"->"1_2";
    "1_0"->"5_0";
    "1_1"->"2_0";
    "1_2"->"4_0";
    "2_0"->"3_0";
    "2_0"->"3_1";
    "2_0"->"3_2";

}

Using "cluster_" prefix solves some of problems (thanks Anne), but there is important in wich order nodes and it's values folows in the dot script.

After all I got new problem - nodes not properly ordered on graph: a, b, c nodes (node 'g' childs) follows in wrong order: enter image description here

Also, is there a way to tell dot place values at right side from nodes? The best, of course, is then the values are placed under nodes, but, how I can find, this is unsolvable problem.

Dot script is:

digraph "test-graph" {
    graph [rankdir=TB dpi=96]
    subgraph cluster_n0 {
        rank=same;
        style=invis;
        "0_0" [ label = "a" ];
    }
    subgraph cluster_n1 {
        rank=same;
        style=invis;
        "1_0" [ label = "b" ];
        "1_1" [ label = "d" ];
            "v3" [ label = "3", shape = "box", width=.01, height=.01 ];
            "1_1"->"v3" [ dir = none, constraint = false ];
        "1_2" [ label = "e" ];
    }
    subgraph cluster_n2 {
        rank=same;
        style=invis;
        "2_0" [ label = "g" ];
    }
    subgraph cluster_n3 {
        rank=same;
        style=invis;
        "3_0" [ label = "a" ];
            "v2" [ label = "2", shape = "box", width=.01, height=.01 ];
            "3_0"->"v2" [ dir = none, constraint = false ];
        "3_1" [ label = "b" ];
            "v0" [ label = "0", shape = "box", width=.01, height=.01 ];
            "3_1"->"v0" [ dir = none, constraint = false ];
        "3_2" [ label = "c" ];
            "v5" [ label = "5", shape = "box", width=.01, height=.01 ];
            "3_2"->"v5" [ dir = none, constraint = false ];
    }
    subgraph cluster_n4 {
        rank=same;
        style=invis;
        "4_0" [ label = "f" ];
            "v1" [ label = "1", shape = "box", width=.01, height=.01 ];
            "4_0"->"v1" [ dir = none, constraint = false ];
    }
    subgraph cluster_n5 {
        rank=same;
        style=invis;
        "5_0" [ label = "c" ];
            "v4" [ label = "4", shape = "box", width=.01, height=.01 ];
            "5_0"->"v4" [ dir = none, constraint = false ];
    }
    "start"->"0_0";
    "0_0"->"1_0";
    "0_0"->"1_1";
    "0_0"->"1_2";
    "1_0"->"5_0";
    "1_1"->"2_0";
    "1_2"->"4_0";
    "2_0"->"3_0";
    "2_0"->"3_1";
    "2_0"->"3_2";

}

score 1 · Answer 1 · answered Jun 23 '14 at 15:18

1

To group the "value" node with the node, you have to use subgraphs with a name starting by cluster_. For instance:

subgraph cluster_n4_0 {
  rank=same;
  "4_0" [ label = "f" ];
  "v1" [ label = "1", shape = "box" ];
  "4_0"->"v1" [ dir = none];
}

To have smaller nodes for the values, you can use the width and height attributes.

I don't think that you need several level of subgraphs here, using clusters for pairs of node should be enougt.

answered Jun 23 '14 at 15:18

Anne

1,270
6
15

Clusters work fine, thanks. Only I need now is the remove border around cluster nodes – Bernd Jacobi Jun 23 '14 at 16:42
Use this: subgraph [ style="invis"]; – Anne Jun 24 '14 at 10:05

score 0 · Answer 2 · answered Jun 23 '14 at 03:15

add an invisiable edge from box to next level node, like following example

digraph "test-graph" {
    graph [rankdir=TB,dpi=96,splines=false]
    "1_1" [ label = "d" ];
    "v3" [ label = "3", shape = "box", width = 0, height = 0];
    "2_0" [ label = "g" ];

    "1_1"->"v3" [ dir = none];
    v3->"2_0"[style=invisible,dir = none];
    "1_1"->"2_0";
}

How I can draw the tree with values stored in nodes with graphviz?

2 Answers2