javascript - 将鼠标悬停弹出窗口添加到 d3 树叶

Question

我在这里遇到了这个使用 d3 构建可折叠动画缩进树的好例子。

mouseover当叶节点上发生事件时，如何添加一个有效的弹出窗口？弹出窗口应出现在实际节点旁边。

Answer 1

通过将 .on 事件添加到 nodeEnter.append("svg:circle") 部分，您几乎可以在 mouseover 和 mouseout 上做任何您想做的事情：

nodeEnter.append("svg:circle")
  //.attr("class", "node")
  //.attr("cx", function(d) { return source.x0; })
  //.attr("cy", function(d) { return source.y0; })
  .attr("r", 4.5)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
  .on("mouseover", addLabel)
  .on("mouseout", clearLabel)
  .on("click", click);

除了这两行代码之外，您还必须编写 addLabel 和 clearLabel 函数（如示例中显示或隐藏子节点的 click 函数）。

您可以通过将其位置传递给函数或通过相对于鼠标定位它来让节点出现弹出窗口。