tree3-react

A javascript library for generating interactive phylogenetic tree visualizations. Relies on D3 hierarchy layout to generate SVG elements, with a focus on customizability.

Example Github Page

Check out the Radial, Rectangular, and Unrooted trees in this demo!

Features

* Layouts: Radial, Rectangular, Unrooted (Equal-Angle)
* Pan/Zoom functionality
* Callback functions for tree interactions
* Customizable menu options for links, nodes, and leaves

Tree params

$3

(String) required. Newick data.

$3

(Radial tree only!)
(number) Determines the width of the generated svg. Defaults to `1000

.



$3

  (Unrooted tree only!)

(number) Used to scale the size of the tree to make nodes and leaves more readable. Defaults to 500

.



$3

function (event, node)

 Click, mouse enter, and mouse leave callback functions for inner nodes.



$3

function (event, node)

 Click, mouse enter, and mouse leave callback functions for leaves.



$3

function (event, source node, target node)

 Click, mouse enter, and mouse leave callback functions for links.



$3

Array of objects with the following properties:



| Property | Type | Description |

|----------|------|-------------|

|

label | function(node) => string

 | Determines the label of the custom option |

|

onClick | function(node) => void

 | Callback function when option is selected |

|

toShow | function(node) => boolean

 | Determines whether to show this option for the given node |



Example:

javascript

customNodeMenuItems={[

  {

    label: (node) => "Custom Action",

    onClick: (node) => console.log("Clicked on node:", node),

    toShow: (node) => node.data.someProperty === true

  }

]}





$3

Array of objects with the following properties:



| Property | Type | Description |

|----------|------|-------------|

|

label | function(sourceNode, targetNode) => string

 | Determines the label of the custom option |

|

onClick | function(sourceNode, targetNode) => void

 | Callback function when option is selected |

|

toShow | function(sourceNode, targetNode) => boolean

 | Determines whether to show this option for the given link |





$3

function (node)

 Callback used for custom rendering options.



$3

function (source node, target node)

 Callback used for custom rendering options.



$3

(string)

 Name of the node to automatically center on upon rendering the tree.



Tree Functions

These functions can be accessed through the useRef React hook of the tree element.



$3

  Returns the d3 selection of all nodes.



$3

  Returns the d3 selection of all leaves.



$3

  Returns the d3 selection of all links.



$3

  Determines whether to render the links according to their length.

  For a radial tree, this defaults to

false

.

  For a rectangular tree, this defaults to

false

.

  Unrooted trees do not have this function.



$3

  Determines whether to render leaf labels or not. Defaults to

true

.



$3

  Determines whether to align tips with each other, or to attach tips on the ends of branches. Defaults to

false

.

  Unrooted trees do not have this function.



$3

  Resets the pan/zoom of the tree.



$3

  Returns the root node. 

  Unrooted trees do not have this function.



$3

  (Unrooted Tree only!)

  Returns the unrooted tree data object.



$3

  Returns the HTML div element that the svg is rendered in.



$3

  Pans the svg to center the node or leaf.



Tree State

  Stores the changes made to a tree in an object. When a tree is rendered given a state object,

  any applicable transforms will be applied once when first initialized.

$3

state.root: string

 will find a given node name and reroot to this node.



Running example

bash

cd /tree3

npm i 

npm run build:example

npm run start:example





Usage

tsx

import React, { Component } from 'react'



import { RadialTree } from 'tree3-react'



const newickData = "(((A:0.2, B:0.3):0.3,(C:0.5, D:0.3):0.2):0.3, E:0.7):1.0;"



class Example extends Component {

  render() {

    return (

      

        

      

    )

  }

}

License

MIT © [](https://github.com/)

tree3-react

A javascript library for generating interactive phylogenetic tree visualizations. Relies on D3 hierarchy layout to generate SVG elements, with a focus on customizability.

Example Github Page

Check out the Radial, Rectangular, and Unrooted trees in this demo!

Features

* Layouts: Radial, Rectangular, Unrooted (Equal-Angle)
* Pan/Zoom functionality
* Callback functions for tree interactions
* Customizable menu options for links, nodes, and leaves

Tree params

$3

(String) required. Newick data.

$3

(Radial tree only!)
(number) Determines the width of the generated svg. Defaults to `1000

.



$3

  (Unrooted tree only!)

(number) Used to scale the size of the tree to make nodes and leaves more readable. Defaults to 500

.



$3

function (event, node)

 Click, mouse enter, and mouse leave callback functions for inner nodes.



$3

function (event, node)

 Click, mouse enter, and mouse leave callback functions for leaves.



$3

function (event, source node, target node)

 Click, mouse enter, and mouse leave callback functions for links.



$3

Array of objects with the following properties:



| Property | Type | Description |

|----------|------|-------------|

|

label | function(node) => string

 | Determines the label of the custom option |

|

onClick | function(node) => void

 | Callback function when option is selected |

|

toShow | function(node) => boolean

 | Determines whether to show this option for the given node |



Example:

javascript

customNodeMenuItems={[

  {

    label: (node) => "Custom Action",

    onClick: (node) => console.log("Clicked on node:", node),

    toShow: (node) => node.data.someProperty === true

  }

]}





$3

Array of objects with the following properties:



| Property | Type | Description |

|----------|------|-------------|

|

label | function(sourceNode, targetNode) => string

 | Determines the label of the custom option |

|

onClick | function(sourceNode, targetNode) => void

 | Callback function when option is selected |

|

toShow | function(sourceNode, targetNode) => boolean

 | Determines whether to show this option for the given link |





$3

function (node)

 Callback used for custom rendering options.



$3

function (source node, target node)

 Callback used for custom rendering options.



$3

(string)

 Name of the node to automatically center on upon rendering the tree.



Tree Functions

These functions can be accessed through the useRef React hook of the tree element.



$3

  Returns the d3 selection of all nodes.



$3

  Returns the d3 selection of all leaves.



$3

  Returns the d3 selection of all links.



$3

  Determines whether to render the links according to their length.

  For a radial tree, this defaults to

false

.

  For a rectangular tree, this defaults to

false

.

  Unrooted trees do not have this function.



$3

  Determines whether to render leaf labels or not. Defaults to

true

.



$3

  Determines whether to align tips with each other, or to attach tips on the ends of branches. Defaults to

false

.

  Unrooted trees do not have this function.



$3

  Resets the pan/zoom of the tree.



$3

  Returns the root node. 

  Unrooted trees do not have this function.



$3

  (Unrooted Tree only!)

  Returns the unrooted tree data object.



$3

  Returns the HTML div element that the svg is rendered in.



$3

  Pans the svg to center the node or leaf.



Tree State

  Stores the changes made to a tree in an object. When a tree is rendered given a state object,

  any applicable transforms will be applied once when first initialized.

$3

state.root: string

 will find a given node name and reroot to this node.



Running example

bash

cd /tree3

npm i 

npm run build:example

npm run start:example





Usage

tsx

import React, { Component } from 'react'



import { RadialTree } from 'tree3-react'



const newickData = "(((A:0.2, B:0.3):0.3,(C:0.5, D:0.3):0.2):0.3, E:0.7):1.0;"



class Example extends Component {

  render() {

    return (

      

        

      

    )

  }

}