D3 Examples - Node constancy between trees

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <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>
​
<body>
    <div id="mydiv"></div>
​
    <script>
    (function () {
        var div = document.getElementById("mydiv");
​
        // In the div, we set up a "select" to transition between two trees keeping node constancy
        var menu_pane = d3.select(div)
            .append("div")
            .append("span")
            .text("Tree:  ");
​
        var sel = menu_pane
            .append("select")
            .on("change", function(d) {
                var data = trees[this.value];
                tree
                    .data(data)
                    .update()
        });
​
        sel
            .append("option")
            .attr("value", 0)
            .attr("selected", 1)
            .text("tree 1");
        sel
            .append("option")
            .attr("value", 1)
            .text("tree 2");
​
        var sel2 = menu_pane
            .append("select")
            .on("change", function (d) {
                tree
                    .id(ids[this.value])
                    .update();
            })
        sel2
            .append("option")
            .attr("value", 0)
            .attr("selected", 1)
            .text("index by id");
        sel2
            .append("option")
            .attr("value", 1)
            .text("index by name");
​
        // We create the new tree
        var newick1 = "((((first,second)p,(third,fourth)s)d,fifth)e,sixth)g";
        var newick2 = "(((first,second)p,third)d,fourth)d";
        var trees = [
            tnt.tree.parse_newick(newick1),
            tnt.tree.parse_newick(newick2)
        ];
        var ids = [
            function (d) {
                return d._id
            },
            function (d) {
                return d.name || d._id;
            }
        ];
​
        var tree = tnt.tree()
            .node_display(tnt.tree.node_display.circle()
                .size(5)
                .stroke('black')
                .fill('grey')
            )
            .label(tnt.tree.label.text()
                .fontsize(function (node) {
                    if (node.is_leaf()) {
                        return 15;
                    }
                    return 12;
                })
                .fontweight("bold")
            )
            .data(trees[0])
            .layout(tnt.tree.layout.vertical()
                .width(600)
                .scale(false)
            )
            .duration(2000);
​
        // The tree is rendered at this point
        tree(div);
    })();
    </script>
</body>
​
    