Built with blockbuilder.org
This example is forked from Collapsible nodes.
This framework is awesome but i still feel very strange while using d3.selection.classed() function, for some of the path selections can not attach one specific class name. Very odd behavior!
More information relate to Newick Format please reference Wikipedia and TnT tree API.
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
<script src="collapse.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
button{
display: block;
position: absolute;
top: 10px;
left: 10px;
border-radius: 8px;
padding: 3px;
font-size: 1.2em;
width: 80px;
height: 50px;
color: yellow;
background-color: tomato;
opacity: 0.4;
cursor: pointer;
transition: all 0.5s;
}
button:hover{
opacity: 1;
}
path.marked{
stroke: red !important;
stroke-width: 3;
stroke-dasharray: 10,5;
}
</style>
</head>
<body>
<div id="mydiv" style="position:relative;">
<button>Vertical</button>
</div>
<script>
function collapse_nodes(div){
var newick = "(((((homo_sapiens:9,pan_troglodytes:9)207598:34,callithrix_jacchus:43)314293:52,(mus_musculus:95, rat:100)rodents:55)314146:215,taeniopygia_guttata:310)32524:107,danio_rerio:417)117571:135;";
var data = tnt.tree.parse_newick(newick);
var node_size = 8,
node_fill = 'lightgrey',
node_stroke = 'black';
var expanded_node = tnt.tree.node_display.circle()
.size(node_size)
.fill(node_fill)
.stroke(node_stroke);
var collapsed_node = tnt.tree.node_display.triangle()
.size(node_size)
.fill(node_fill)
.stroke(node_stroke);
var node_display = tnt.tree.node_display()
.size(24)
.display(function(node){
if(node.is_collapsed()){
collapsed_node.display().call(this, collapsed_node);
}else{
expanded_node.display().call(this, expanded_node);
}
});
var tree = tnt.tree()
.node_display(node_display)
.data(data)
.duration(500)
.layout(tnt.tree.layout.vertical().width(600).scale(false));
tree.on('click', function(node){
node.toggle();
tree.update();
eventBinding();
});
tree(div);
// event
d3.select('button').on("click", function () {
if (this.innerHTML == 'Vertical') {
this.innerHTML = 'Radical';
tree.layout(tnt.tree.layout.radial()
.width(600)
.scale(false)
);
tree.update();
} else {
this.innerHTML = 'Vertical';
tree.layout(tnt.tree.layout.vertical()
.width(600)
.scale(false)
);
tree.update();
};
});
function eventBinding(){
var root = tnt.tree.node(data);
d3.selectAll('g.leaf').selectAll('*')
.on('mouseover', function(D){
var currentNode = root.find_node_by_name(D.name);
while(currentNode.parent()){
d3.selectAll('path.tnt_tree_link')
.each(function(d){
var self = d3.select(this);
self.attr('class', function(){
if(currentNode.property('name') === d.target.name){ return self.attr('class') + ' marked'};
return self.attr('class');
})
})
currentNode = currentNode.parent();
}
})
.on('mouseout', function(d){
d3.selectAll('path.marked').classed('marked', false);
})
}
};
collapse_nodes(document.getElementById("mydiv"));
</script>
</body>
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