D3 Examples - Tooltips on nodes

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <!-- D3 -->
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
​
    <!-- TnT -->
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <script src="https://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
​
​
    <!-- TnT Tooltip -->
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
    <script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>
</head>
​
<body>
    <h1>Simple species tree</h1>
    <div id="mytree"></div>
    <script>
        // newick tree
        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();
        tree_vis
            .data(tnt.tree.parse_newick(newick))
            .node_display(tree_vis.node_display()
                .size(4)
                .fill("#888888")
            )
            .label (tnt.tree.label.text()
                .fontsize(12)
                .height(24)
            )
            .layout(tnt.tree.layout.vertical()
                .width(650)
                .scale(false)
            )
            .on("click", function (d) {
                tnt.tooltip.table()
                    .width(120)
                    .call(this, {
                        "header" : "Node",
                        "rows" : [
                            {"label": "id", "value": d.id()}
                        ]
                    })
            });
​
        tree_vis(document.getElementById("mytree"));
    </script>
​
    <footer>
      <aside>Released under <a href="https://www.opensource.org/licenses/apache2.0.php">Apache 2.0</a>.</aside>
      Copyright 2014-2016 <a href="https://www.ebi.ac.uk/~mp" rel="author">Miguel Pignatelli</a>
    </footer>
</body>
​
    