Node constancy between trees

Example showing node constancy between two TnT Trees when nodes are indexed by internal id or by name.

<!DOCTYPE html>

// 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>

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