This is a browser module that renders a D3 quadtree's nodes in a tree layout.

It depends on D3 and Underscore or Lo-Dash.

npm install quadtreetree

HTML:

<svg id="quadtreetree" width="98%" height="75%">
  <g id="treeroot"></g>
</svg>

JavaScript:

var quadtreetree = createQuadtreetree({
  rootSelector: '#treeroot',
  vertical: true
});

// Call this whenever the quadtree is updated and you want to update
// quadtreetree's rendering of it.
quadtreetree.update(quadtree);

quadtreetree dispatches a couple of events if you want to listen for them.

quadtreetree-nodeSelected

This event is dispatched when the user selects a node. The event's detail object will be the selected tree layout node (not the quadtree node). However, it will contain the quadtree node in a property called sourceNode. Example:

document.addEventListener('quadtreetree-nodeSelected', logSelectedNode);

function logSelectedNode(e) {
  console.log(e.detail.sourceNode);
}

quadtreetree-dotsEntered

This event is dispatched when new nodes are rendered as dots in the tree layout. The event's detail object will be a D3 selection of the newly added layout tree nodes.

See example/index.html. There's a live version of it here.

MIT.