Масштабируемая древовидная карта с подсказками внизу

Вы можете зарегистрировать другой обработчик событий, когда ячейки вводятся сразу после функции масштабирования. В приведенном примере соответствующий код будет выглядеть следующим образом:

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) { return zoom(node == d.parent ? root : d.parent); });

Для этого вы можете добавить в другой обработчик для мыши и внутри этой функции подойти к дереву, записав имя каждого родительского узла до тех пор, пока не будет больше родительских узлов, а затем запишите список в ваш popover. Давайте предположим только ради этого примера, что вы настраиваете свою подсказку, как показано на вашем изображении, и вы указали ей идентификатор tooltip.

Тогда вы можете использовать обработчик следующим образом:

.on('mouseover', function(d) {
  // this variable will be used in a loop to store the current node being inspected
  var currentNode = d;
  // this array will hold the names of each subsequent parent node
  var 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);
}