SVGTree Demos

The examples on this page showcase the basic functionality of the trees made with SVGTree. The code fragments below use jQuery. It is not required by SVGTree, but used to simplify the code of examples.

Trees can be created using the SVGTree function. The function accepts the three arguments: the Newick notation, the container element (usually, a <DIV>), and (optionally) display options.

Code


		

		
		
	

	
	

		

			

		

		

			
To include special characters (,();) associated with the nodes of the tree, escape them with a backslash \.

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
Options allow to change the presentation of the tree. For example, edges parameter
			controls the shape of the edges (angular or straight), and nodes parameter determines
			the shape of the nodes.

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
In addition to the vertical mode (children below their ancestors), the tree can be rendered in the horizontal mode
			(children to the right of their ancestors).

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
By default, the size of the SVG element where the tree is drawn isn't set, which means you should specify it,
			e.g. using CSS. This behavior can be changed by setting size option to 'fit' (to fit the tree), 
			or an array of the two values (width and height of the SVG element in pixels).

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
The tree may respond to the user events. The degree of interaction can be tuned using interaction option, 
			which takes an array of possible interactions.
			For example, you can allow to collapse and expand tree nodes; these operations don't actually modify the tree.
			To collapse or expand a node, double click on it or use space or enter keys.

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
To allow editing the tree, set interaction option to 'edit'.
			This allows editing node tags.

			
			

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
If you specify 'rearrange' option in interaction, the sibling nodes 
			can be rearranged by dragging. Note that this option doesn't change the semantics of the tree 
			for most applications.

			
			

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
To allow adding and removing nodes from the tree, you may use 'add' and 'remove'
			options, respectively. Nodes can be removed from the tree using delete key and added using insert key.
			Note that to edit the labels of the newly created nodes, you have to specify 'edit' option together 
			with 'add'.

			
			

			
			
Code

			

		

		
		
	

	
	

		

			

		

		

			
Finally, you can allow to drag the nodes of the tree by including 'drag' action 
			into the interaction option.
			You can select any of the three insertion points for a dragged subtree:

			
			
The active insertion point is marked with an arrow pointing in the direction the dragged subtree 
			is going to be inserted.

			
			
If you press Ctrl key during drag, the subtree will be copied and not moved.

			
			

			
			
Code

			

		

		
		
	

	
	

		
Note that nodes can be dragged between different trees that support drag-n-drop, e.g. the two trees to the bottom.

	
		

			

				

			

			

				

			

		

		
		

		
		
Code

		

		
		
	

	
	

		

			

		

		

			By default, you can drag nodes only within the same tree or between trees on the same page. 
			To allow dragging text from outside sources, set dragAsText option to true.
			The dragged text is interpreted as Newick form of a subtree to be added to the tree.
			In case the Newick form is malformed, the text is used to create a single node.
			
			
The same option allows dropping nodes anywhere on the HTML page or other applications
			where the text input is expected. The dropped text is the Newick representation of the dragged subtree.

			
			
Note. Due to Microsoft being Microsoft, dragAsText option is effectively always true 
			in Internet Explorer.

			
			
Try to drag a node here: 

			
			

			
			
Code

			

		

		
		
	

	
	

		
SVGTree can be used to visualize moderately big trees. For example, the tree below has 300 nodes.


		

		
		

			

				

			

		

		
		
Code