Example of searching nodes in TnT Tree
Created
January 14, 2016 15:38
-
-
Save emepyc/d0502a9167d29b79d313 to your computer and use it in GitHub Desktop.
Searching nodes
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> | |
<!-- D3 --> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<!-- TnT --> | |
<link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.css" /> | |
<script src="http://tntvis.github.io/tnt.tree/build/tnt.tree.js"></script> | |
</head> | |
<body> | |
<span>Search in tree: <input type="text" oninput="search(this.value)"></input></span> | |
<div id="mydiv"></div> | |
<script> | |
<!-- search --> | |
function color (node, val) { | |
var name = node.node_name(); | |
if (name.toLowerCase().indexOf(val.toLowerCase()) > -1) { | |
return "steelblue"; | |
} | |
return "black"; | |
} | |
function search(val) { | |
var root = tree_vis.root(); | |
tree_vis.node_display() | |
.fill(function (node) { | |
return color(node, val); | |
}); | |
tree_vis.label() | |
.color(function (node) { | |
return color(node, val); | |
}) | |
tree_vis.update_nodes(); | |
} | |
var newick = "(((C.elegans,Fly),(((((((((Tasmanian Devil,Wallaby,Opossum),((Armadillo,Sloth),(Rock hyrax,Tenrec,Elephant),(((Rabbit,Pika),(((Rat,Mouse),Kangaroo rat,Squirrel),Guinea Pig)),((Mouse lemur,Bushbaby),((((((Chimp,Human,Gorilla),Orangutan),Gibbon),Macaque),Marmoset),Tarsier)),Tree Shrew),((Microbat,Flying fox),(Hedgehog,Shrew),((Panda,Dog,Domestic ferret),Cat),((Cow,Sheep),Pig,Alpaca,Dolphin),Horse))),Platypus),((((Collared flycatcher,Zebra finch),(Chicken,Turkey),Duck),Chinese softshell turtle),Anole lizard)),Xenopus),Coelacanth),(((Zebrafish,Cave fish),((((Medaka,Platyfish),Stickleback),(Fugu,Tetraodon),Tilapia),Cod)),Spotted gar)),Lamprey),(C.savignyi,C.intestinalis))),S.cerevisiae);"; | |
var tree_vis = tnt.tree() | |
.data(tnt.tree.parse_newick(newick)); | |
tree_vis.layout() | |
.width(500) | |
.scale(false); | |
tree_vis.node_display() | |
.fill("steelblue"); | |
tree_vis.label() | |
.color("steelblue"); | |
tree_vis(document.getElementById("mydiv")); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment