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轴的一条线。

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

1 个答案: