Javascript 在d3.js中鼠标上方的弹出窗口中显示所有堆叠区域数据

我想以nvd3示例中实现的方式在鼠标上方显示堆叠区域数据： 但在纯d3中。 目前，我在鼠标悬停事件上显示弹出窗口和垂直线，但无法显示弹出窗口中堆栈的所有数据。 下面是Coffescript

verticalLine = svg.append('line')
  .attr({
    'x1': 0,
    'y1': 0,
    'x2': 0,
    'y2': height
  })
  .attr("stroke", "steelblue")
  .attr('class', 'verticalLine')

svg.on "mousemove", () ->
  xPos = d3.mouse(this)[0]
  svg.select(".verticalLine").attr("transform", () ->
    "translate(" + xPos + ",0)")

tooltip.transition()
  .duration(200)
  .style("font-size", "12px")
  .style("opacity", .9)
tooltip.html("Info")
  .style("left", (d3.event.pageX + 5) + "px")
  .style("top", (d3.event.pageY - 28) + "px")

svg.on "mouseout", () ->
  tooltip.transition()
    .duration(500)
    .style "opacity", 0

---

看起来不仅仅是我在努力解决这个问题，所以我在下面发布了我的解决方案。 其思想是获得垂直线与x轴的交点，即找到一个目标日期，这将允许我们获取与该日期相关的所有其他字段。我过去常常找到目标日期的索引

xPos = d3.mouse(this)[0]
bisectDate = d3.bisector((d) -> d.date).left
date = x.invert(xPos)
currentDateIndex = bisectDate(browsers[0].values, date)

---

工作代码在这里

你看过NVD3源代码了吗？是的，片段没有告诉我太多。他们使用InteractiveSect来确定点的位置（交点），但对于我的简单示例来说，它似乎太复杂了。我最终解决了问题。@OsmanMazinov:你能告诉我，你是如何解决这个问题的吗。我也陷入了同样的问题。