emepyc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Example of TnT Tree. When an internal node is clicked, it collapses the tree structure behind it. When the same node is clicked again, only the first level of children is uncollapsed

  
## index.html
<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="uncollapse_1_level.js"></script>
</head>

<body>
    <div id="mydiv"></div>

    <script>
    uncollapse_1_level(document.getElementById("mydiv"));
    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## uncollapse_1_level.js
var uncollapse_1_level = function(div) {
    "use strict";

    var tree_vis = tnt.tree();

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

    // Show different node shapes for collapsed/non-collapsed nodes
    var node_size = 14;
    var node_fill="lightgrey";
    var 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, node);
            } else {
                expanded_node.display().call(this, node);
            }
    });

    tree_vis
        .node_display(node_display)
        .data(data)
        .duration(500)
        .layout(tnt.tree.layout.vertical()
        .width(600)
        .scale(false));

    tree_vis.on ("click", function(node){
        var thisNode = node.node_name();
        if (node.is_collapsed()) {
            node.toggle();
        } else {
            node.apply(function (n) {
                if (n.node_name() === thisNode) {
                    n.toggle();
                } else {
                    if (!n.is_collapsed()) {
                        n.toggle();
                    }
                }
                // if (!node.is_collapsed()) {
                //     n.toggle();
                // }
            }, true); // true to also visit collapsed nodes (the current node is the one being collapsed)
        }
        tree_vis.update();
    });

    // The visualization is started at this point
    tree_vis(div);

};
	<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="uncollapse_1_level.js"></script>
	</head>

	<body>
	<div id="mydiv"></div>

	<script>
	uncollapse_1_level(document.getElementById("mydiv"));
	</script>
	</body>
	var uncollapse_1_level = function(div) {
	"use strict";

	var tree_vis = tnt.tree();

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

	// Show different node shapes for collapsed/non-collapsed nodes
	var node_size = 14;
	var node_fill="lightgrey";
	var 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, node);
	} else {
	expanded_node.display().call(this, node);
	}
	});

	tree_vis
	.node_display(node_display)
	.data(data)
	.duration(500)
	.layout(tnt.tree.layout.vertical()
	.width(600)
	.scale(false));

	tree_vis.on ("click", function(node){
	var thisNode = node.node_name();
	if (node.is_collapsed()) {
	node.toggle();
	} else {
	node.apply(function (n) {
	if (n.node_name() === thisNode) {
	n.toggle();
	} else {
	if (!n.is_collapsed()) {
	n.toggle();
	}
	}
	// if (!node.is_collapsed()) {
	// n.toggle();
	// }
	}, true); // true to also visit collapsed nodes (the current node is the one being collapsed)
	}
	tree_vis.update();
	});

	// The visualization is started at this point
	tree_vis(div);

	};