鼠标悬停功能未执行 D3 折线图

Question

我正在尝试实现类似的东西，当将鼠标悬停在表示数据点的特定圆圈上时，显示带有其数据的工具提示：http://bl.ocks.org/d3noob/a22c42db65eb00d4e369

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

• 编辑，在代码中附加了一个 plunker 代码，我很抱歉没有早点包含它：http://plnkr.co/edit/cYSASsNWcFFkLp9pKh0q?p=preview

目前，我已经使用每行的单独数据集使用它制作圆圈，但是当我将鼠标悬停在特定圆圈上时，似乎没有鼠标悬停事件。尝试控制台日志记录，但也没有出现任何内容。

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);
    })

Answer 1

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

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

此外，您还尝试使用d[i]["less than 7"]访问您的数据。您应该将d写入控制台，因为此时它似乎不是一个数组。我想你想要d["less than 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 轴的一条线。