Old school D3 from simpler times

All examples By author By category About

emepyc

Full window Github gist

Selecting subtrees

Example of how to re-root a tree on an internal node in TnT Tree. Click on an internal node to re-root the tree in that node. Click on the "Full Tree" button to get the full tree again

Built with blockbuilder.org

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>
    <button>Full Tree</button>
    <div id="mydiv"></div>

<script>
    // newick tree
    var newick = "((((((((PATIENT_D:1.0,PATIENT_F:1.0):0.8,PATIENT_H:1.0):0.50,(((Local_Control_4:1.0,Local_Control_3:1.0):1.0,Local\
_Control_1:1.0):0.60,(Local_Control_5:1.0,Local_Control_2:1.0):0.9):0.40):0.70,DENTIST_WIFE:1.0):0.70,(PATIENT_E:1.0,PATIENT_B:1.0):\
0.9):1.0,PATIENT_G:1.0):0.8,(DENTIST:1.0,PATIENT_C:1.0):0.70):1.0,PATIENT_A:1.0);";
    var tree = tnt.tree();
    tree
        .data(tnt.tree.parse_newick(newick))
        .node_display(tree.node_display()
            .size(4)
            .fill("#888888")
        )
        .label (tnt.tree.label.text()
            .fontsize(12)
            .height(24)
        )
        .layout(tnt.tree.layout.vertical()
            .width(650)
            .scale(false)
        );
    tree(document.getElementById("mydiv"));

var	root = tree.root();
    // Reroot when clicking a subnode
    tree.on("click", function (node) {
      var subtree = root.subtree(node.get_all_leaves());
      tree.data(subtree.data());
      tree.update();
    });

// Getting the full tree back
    $('button').on('click', function() {
        tree.data(root.data());
        tree.update();
    });

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js