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

Question

我遇到了构建可折叠动画缩进树的好例子here 使用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函数）。

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