Extending d3 tree layout to provide HTML box at final node

Question

I would like to Extend d3 tree layout to provide hyperlinks and text for each final node

http://mbostock.github.io/d3/talk/20111018/tree.html

For example if you go to

flare> analytics > ckuster > AgglomerativeClustr

I would like under the text AgglomerativeCluster I would like to have a textbox with the ability to have custom HTML.

How would I do this?

Answer 1

There are several ways to achieve what you want, but I believe the solution below is both simple and efficient.

I'll start with an example that is similar to yours, and also does not have any hyperlinks:

link to jsfiddle - starting point,

and will walk you through all necessary but simple modifications.

First, let's add field "url" for nodes that we want to have labels as hyperlinks:

        {
            "children": [{
            "name": "AgglomerativeCluster",
            "size": 3938,
            "url": "http://www.example.com/"    
        }, {
            "name": "CommunityStructure",
            "size": 3812,
            "url": "http://www.example.com/"    

        }, {
            "name": "HierarchicalCluster",
            "size": 6714,
            "url": "http://www.example.com/"    

        }, {
            "name": "MergeEdge",
            "size": 743,
            "url": "http://www.example.com/"    
        }

Now, let's write code that selects all labels whose node data contain anything in field "url", and for each such label adds appropriate clock handler that will open correspondent url: (it also sets different cursor pointer for mouseovers so that user knows the label is actually a hyperlink)

d3.selectAll(".node text")
    .filter(function(d){ return d.url; })
    .style("cursor", "pointer")
    .on("click", function(d){
        document.location.href = d.url;
    });

That's it!

link to jsfiddle - finished example

Answer 2

NOTE: by the time I finished this, my good buddy @VividD had already supplied an answer. But because the OP expressed a desire for custom HTML, this may still be relevant.

Basically one wants to mix HTML with SVG in one form or another, a common request. However, chances are you will not find a ready-made implementation of this since it takes time and has a fair amount of layout considerations to make it work (see the setting of x,y attributes in the fiddle I linked below - hardcoded for simplicity). Having said that, here is my attempt at helping you.

The most common solution is the use of an SVG:foreignObject. But be aware that IE does not support it. Here is a gist by the great Mike that showcases a very simple example. I took the liberty to extend it and create a FIDDLE with a slightly more elaborate example, a form with a textarea. I believe this should be enough to generate some ideas and get you going.

svg.append("foreignObject")
    .attr("x", 40)
    .attr("y", 40)
    .attr("width", 480)
    .attr("height", 240)
  .append("xhtml:body")
    ...

You might want to consider generating a fiddle of your own (based on this one) if you don't solve your issue completely.