TnT Tree

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.

forked from 1Cr18Ni9's block: TnT Tree

forked from 63anp3ca's block: TnT Tree

<!DOCTYPE html>
<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>

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);

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