在d3.js中的鼠标悬停时在弹出窗口中显示所有堆积的区域数据

Question

I want to show stacked area data on mouseover in a way it's implemented in the nvd3 example: http://nvd3.org/examples/stackedArea.html but in pure d3. Currently I'm displaying popup and vertical line on mouse over event, but wasn't able to display all data for stacks within the popup. Coffescript is below.

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

Here is my fiddle

Answer 1

Looks like not only me struggled with the problem, so I'm posting my solution below. The idea is to get an intersection of the vertical line with x axis, ie find a target date, which will then allow us to grab all other fields related to that date. I used d3.bisector to find an index of the target date.

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

Working code is here https://jsfiddle.net/ovvn/t44qovhg/