Example showing node constancy between two TnT Trees when nodes are indexed by internal id or by name.
Last active
January 12, 2016 16:37
-
-
Save emepyc/784395387c81423476ef to your computer and use it in GitHub Desktop.
Node constancy between trees
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" /> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment