Question

我希望以在nvd3示例中实现的方式显示鼠标悬停时的堆积区域数据： http://nvd3.org/examples/stackedArea.html但是在纯粹的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

Here is my fiddle

Answer 1

看起来我不仅在这个问题上挣扎，所以我在下面发布我的解决方案。想法是获得垂直线与x轴的交点，即找到目标日期，这将允许我们获取与该日期相关的所有其他字段。我使用d3.bisector来查找目标日期的索引。

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

工作代码在https://jsfiddle.net/ovvn/t44qovhg/

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

1 个答案: