Question

I’ve been playing around with d3.js and it’s pretty cool. I need to have a binary tree that’s flexible enough to create new child nodes.

I was thinking of having an <svg> element (for the lines) behind a <div> that would contain all of the HTML. I have managed to get the binary tree to look right and even when you click on a node it creates another node but ONLY from the event thats bound to a circle under the <svg> element. How would I get something like a <div> to trigger an event that adds a child node under a parent?

Also how would window resizing work with this since the html is separate from the svg canvas?

Answer 1

You would attach the event handlers to the html the same way you would to an svg element

// Enter any new nodes at the parent's previous position.
node.enter()

    // append an html div
    .append("div")

    // event handlers
    .on("click", function(d) {
        // your code to add a new node
    })

(Last time I checked d3’s event handlers are pretty basic and don’t support custom events)

Handling window resizing can be tricky as you have to set the canvas and html container dimensions before generating the tree.

A quick and dirty way of handling this would be to set very large sizes for the html container

vis = d3.select("#chart-inner").append("svg:svg").attr("id", "svg-container").attr("width", 40000).attr("height", 20000).append("svg:g").attr("transform", "translate(0,100)");

Then wrap it all up with a container div

<div id="chart" style="width:100%; overflow:hidden">
     <div id="chart-inner">

It’s not really an ideal solution. If you want to do it properly, you’ll have to work out the depth and width of the tree based on the initial html element size (which would involve a lot of ‘walking’ the data to work out).