Intoduction to D3

Creating a tree of universities in USA which can be zoomable, collapsable and can perform drag-drop

1. Zoomable

2. Collapse and expand

The collapse and expand are performed on nodes, the main logic is based on presence of children and parent to the node.

function collapse(d) { if (d.children) { d._children = d.children; d._children.forEach(collapse); d.children = null; } }

function expand(d) { if (d._children) { d.children = d._children; d.children.forEach(expand); d._children = null; } } The output is shown below

3. Drag-drop To create this initialize function initiateDrag and pass parameters from parent node to target node.

The ghost circle will be activated when we drag the node to target node. It gets terminated when we stop dragging.