Zoomable Treemap With Tooltips At The Bottom

The zoomable treemap is great, but there is one feature that I think would make it even greater. When hovering the mouse around the rectangles (either before or after zooming), the

Solution 1:

You can register another event handler when the cells enter, right after the click-zoom function. In the example you linked the relevant code would be:

var cell = svg.selectAll("g")
  .data(nodes)
 .enter().append("svg:g")
  .attr("class", "cell")
  .attr("transform", function(d) { return"translate(" + d.x + "," + d.y + ")"; })
  .on("click", function(d) { returnzoom(node == d.parent ? root : d.parent); });

To this you could add on another handler for mouseover, and within that function, walk up the tree, recording the name of each parent node until there are no more parent nodes, and then write the list to your popover. Lets assume just for the sake of this example that you set up your tooltip as shown in your image, and you gave it an id of tooltip.

Then you could use a handler like this:

.on('mouseover', function(d) {
  // this variable will be used in a loop to store the current node being inspectedvar currentNode = d;
  // this array will hold the names of each subsequent parent nodevar nameList = [currentNode.name];
  // as long as the current node has a parent...while (typeof currentNode.parent === 'object') {
    // go up a level in the hierarchy
    currentNode = currentNode.parent;
    // add the name to the beginning of the list
    nameList.unshift(currentNode.name);
  }
  // now nameList should look like ['flare','animate','interpolate']//  join the array with slashes (as you have in your example)
  nameList = nameList.join('/');
  // now nameList should look like 'flare/animate/interpolate'//  use this to set the tooltip text
  $('#tooltip').text('Mouse hovering ' + nameList + '. Cell size = ' + d.area);
}