Colin HCKgit

This is a quick hack to draw two parallel links between nodes. Yes, you can scale it to more than two nodes, but it gets increasingly awkward. The alternative is to compute the paths manually, say by computing the perpendicular vector of the vector between the node centers, and offsetting the links accordingly.

A fork of the SVG version. Mouseover to repel nodes. Adapted from my talk on force layouts.

This example pulls together various examples of work with trees in D3.js.

The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.

One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.

Dragging can be performed on any node other than root (flare). Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this Cartesian layout.

	#!/bin/bash
	#
	# DESCRIPTION:
	#
	# Set the bash prompt according to:
	# * the active virtualenv
	# * the branch/status of the current git repository
	# * the return value of the previous command
	# * the fact you just came from Windows and are used to having newlines in
	# your prompts.

	$fullred: #ff0000;
	body {
	font-family: Helvetica, Verdana
	}
	p {
	padding: 7px 10px;
	}
	#demo {
	border: 1px solid $fullred;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">

	body {
	background: #333;
	}