可缩放的树形图，底部有工具提示

Question

zoomable treemap很棒，但我认为有一个功能会让它变得更大。将鼠标悬停在矩形周围时（在缩放之前或之后），没有简单的方法可以知道矩形在层次结构中的位置，以及它的大小。

我是D3的新手，但我想知道我需要做出哪些改变才能拥有如下图所示的悬停工具提示。这是一个相对简单的修复，还是需要对源代码进行大的修改才能获得它？我在哪里可以开始？

Answer 1

当单元格进入后，您可以在单击缩放功能之后立即注册另一个事件处理程序。在链接相关代码的示例中将是：

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); });

为此，您可以添加另一个鼠标悬停处理程序，并在该函数内，向上走树，记录每个父节点的名称，直到没有更多父节点，然后将列表写入您的弹出窗口。让我们假设您只是为了这个示例设置了工具提示，如图所示，并且您为其指定了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);
}