Javascript d3折线图的鼠标悬停功能未执行

我正在尝试实现类似的功能，当鼠标悬停在表示数据点的特定圆上时，会显示包含其数据的工具提示：

但是，我有多行而不是一行

编辑，在代码中附加了一个plunker代码，很抱歉之前没有包含该代码： 目前，我已经使用每一行的单独数据集制作了这些圆圈，但是当我将鼠标移到特定的圆圈上时，似乎没有鼠标移到事件。尝试了控制台日志记录，但也没有显示任何内容

svg.selectAll(".dot")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("fill", colors[0])
    .attr("cx", function(d, i) { return x(d.year) })
    .attr("cy", function(d) { return y(d["less than 7"]) })
    .attr("r", 5)
    .on("mouseover", function(d) {
      // console.log("index", i);
      // console.log(d[i]["less than 7"]);
      // div.html(d[i]["less than 7"])
      // .style("left", (d3.event.pageX) + "px")
      // .style("top", (d3.event.pageY) + "px")
      // .style("opacity", 1);
    })
    .on("mouseout", function(d) {
      div.transition()
      .duration(500)
      .style("opacity", 0);
    })

---

错误控制台为您的代码提供了几个有用的错误

div未定义。你把它当作一个变量来使用，但你从来没有在任何地方定义过它。我想你想要的是tooltip.html而不是div.html。您可能希望在工具提示中选择div-不确定

此外，您正在尝试使用d[i][7]访问您的数据。您应该将d写入控制台，因为此时它似乎不是数组。我想你想要d[少于7]

这样做可以使工具提示对我起作用：

.on("mouseover", function(d, i) {
  console.log("index", i, d);
  console.log(d["8 to 14 years"]);
  dotTooltip.html(d["8 to 14 years"])
  .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY) + "px")
  .style("opacity", 1)
})

---

然而，Plunker中的图形仅为我显示了沿x轴的一条线。

错误控制台为您的代码提供了一些有用的错误

div未定义。你把它当作一个变量来使用，但你从来没有在任何地方定义过它。我想你想要的是tooltip.html而不是div.html。您可能希望在工具提示中选择div-不确定

此外，您正在尝试使用d[i][7]访问您的数据。您应该将d写入控制台，因为此时它似乎不是数组。我想你想要d[少于7]

这样做可以使工具提示对我起作用：

.on("mouseover", function(d, i) {
  console.log("index", i, d);
  console.log(d["8 to 14 years"]);
  dotTooltip.html(d["8 to 14 years"])
  .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY) + "px")
  .style("opacity", 1)
})

---

然而，您的Plunker中的图形仅为我显示了沿x轴的一条线。

此代码似乎没有任何错误。是否尝试了console.logString以查看是否调用了该函数？你的console.log调用中的i变量不在函数d中，我可以给你一个最小的可验证示例吗？嗨@Cyril，我为没有在前面包含示例代码而道歉，我在代码中附加了一个plunker url:。@LoredraL我的错误是忽略了i变量，我在前面尝试控制台日志d，但两种方式都没有出现，现在已经附加了一个plunker代码-似乎没有此代码中的任何错误。是否尝试了console.logString以查看是否调用了该函数？你的console.log调用中的i变量不在函数d中，我可以给你一个最小的可验证示例吗？嗨@Cyril，我为没有在前面包含示例代码而道歉，我在代码中附加了一个plunker url:。@LoredraL我的错误是忽略了i变量，我在前面尝试控制台日志d，但两种方式都没有出现，现在附上了一个plunker代码-他只画了2个年龄组，除2014年外，所有年龄组均为0。但是你说的对，谢谢你！是的，只画了两个年龄组/线。还意识到console.log可能无法工作，因为我有另一个mousemove事件，它不在plunker中。因此，如果没有它，console.log/单独的工具提示将起作用。他将尝试探索实现这两个目标的方法，但如果不可能，他将坚持使用个人工具提示。他只画了两个年龄组，除2014年外，所有年龄组均为0。但是你说的对，谢谢你！是的，只画了两个年龄组/线。还意识到console.log可能无法工作，因为我有另一个mousemove事件，它不在plunker中。因此，如果没有它，console.log/单独的工具提示将起作用。将尝试探索实现这两者的方法，但如果不可能，将坚持使用单独的工具提示。