TnT tree example showing different labels in the same tree using tnt.tree.label.composite. The transformation of each label in the composite label is calculated based on their cumulative width + 10 pixels to allow some extra space between them. But because the branch length label is not aligned to the node's name label, we set its width to -10. This makes the node's name label to display right next to the nodes.
Last active
January 12, 2016 16:40
-
-
Save emepyc/598eebcca0f2595843f7 to your computer and use it in GitHub Desktop.
different labels in the same node
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <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> | |
| <script src="render.js"></script> | |
| </head> | |
| <body> | |
| <div id="mytree"></div> | |
| <script> | |
| render (document.getElementById("mytree")); | |
| </script> | |
| </body> |
This file contains hidden or 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
| var render = function (div) { | |
| "use strict"; | |
| var branch_length_label = tnt.tree.label.text() | |
| .width(function () { | |
| return -10; | |
| }) | |
| .text(function (node) { | |
| return node.data().branch_length; | |
| }) | |
| .fontweight("bold") | |
| .fontsize(13) | |
| .color("red") | |
| .transform(function (node) { | |
| return { | |
| "translate" : [-50, -5], | |
| "rotate" : -0 | |
| }; | |
| }); | |
| var node_name_label = tnt.tree.label.text() | |
| .height(function () { | |
| return 40; | |
| }) | |
| .fontsize(14); | |
| var label = tnt.tree.label.composite() | |
| .add_label(branch_length_label) | |
| .add_label(node_name_label); | |
| var tree_vis = tnt.tree(); | |
| tree_vis | |
| .data (tnt.tree.parse_newick(newick)) | |
| .label (label) | |
| .layout(tnt.tree.layout.vertical() | |
| .width(950) | |
| .scale(true) | |
| ); | |
| tree_vis(div); | |
| }; | |
| var newick = "(((Crotalus_oreganus_oreganus_cytochrome_b:0.00800,Crotalus_horridus_cytochrome_b:0.05866):0.04732,(Thamnophis_elegans_terrestris_cytochrome_b:0.00366,Thamnophis_atratus_cytochrome_b:0.00172):0.06255):0.00555,(Pituophis_catenifer_vertebralis_cytochrome_b:0.00552,Lampropeltis_getula_cytochrome_b:0.02035):0.05762,((Diadophis_punctatus_cytochrome_b:0.06486,Contia_tenuis_cytochrome_b:0.05342):0.01037,Hypsiglena_torquata_cytochrome_b:0.05346):0.00779);"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment