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

Display all stacked area data in popup on mouseover in d3.js

本文关键字：显示 数据 区域 窗口 js d3 鼠标 悬停      更新时间：2023-09-26

我想在鼠标悬停时显示堆叠区域数据，这种方式在nvd3示例中实现:http://nvd3.org/examples/stackedArea.html但在纯d3。目前，我在鼠标上显示弹出框和垂直线，但无法显示弹出框内堆栈的所有数据。

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轴的交点，即找到目标日期，然后允许我们抓取与该日期相关的所有其他字段。我用d3。平分线查找目标日期的索引。

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/

相关文章：