javascript - 可缩放树状图，底部带有工具提示

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 id。

然后你可以使用这样的处理程序:

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