Node height

By default, the layout calculates the height of the tree by using the size of the nodes. If nodes have different sizes, the maximum node size is used. All nodes are given the same space (vertical or radial depending on the layout)

In TnT Tree, all the nodes are given the same space (vertical or radial, depending on the layout) and this space is determined by the size of the nodes. If nodes are of different sizes, the maximum node size is used. For a given node, its size is determined by the maximum value between the node display and its label. In the vertical layout, the total height of the tree is given by the sum of the node heights (ie, the number of nodes times the maximum node height).

There are different ways of giving the nodes extra space, for example by giving more height to text labels. This example creates the same effect by giving the node a size different from the one that is used to plot the nodes themselves.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <style>
        #mydiv {
            margin-top : 50px;
        }
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
</head>

var data = tnt.tree.parse_newick(newick);

// Show different node shapes for collapsed/non-collapsed nodes
        var node_fill="lightgrey";
        var node_stroke="black";

var circle_node = tnt.tree.node_display.circle()
            .size(14) // This is used only for the circle display
            .fill(node_fill)
            .stroke(node_stroke);

var node_display = tnt.tree.node_display()
            .size(24) // This is used for the layout calculation
            .display (function (node) {
                circle_node.display().call(this, node);
            });

var tree = tnt.tree();
        tree
            .node_display(node_display)
            .data(data)
            .label(tree.label()
                .fontsize(14)
            )
            .layout(tnt.tree.layout.vertical()
                .width(600)
                .scale(false)
            );

// The visualization is started at this point
        tree(document.getElementById("mydiv"));

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://tntvis.github.io/tnt.tree/build/tnt.tree.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://tntvis.github.io/tnt.tree/build/tnt.tree.min.js