javascript - d3 v4 获取条形图工具提示的数据

Question

我可以通过定义文本来获得工具提示，但在我的一生中，我无法获得从数据文件打印文本的工具提示。我觉得我搞乱了 d.value 的定义，尽管它被绘制得很好，但我也想知道 v4 是否有一些我不知道的东西。我尝试过将 var 语句移动到各处，但似乎没有任何帮助。它通常最终会出现“无法读取未定义的属性”错误。对我做错了什么有什么想法吗？谢谢。

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("This works just fine");
/* .text(function(d) { return d.value; }); */

d3.tsv("15.tsv", type, function(error, data) {
  if (error) throw error;

  x.domain([0, d3.max(data, function(d) { return d.value; })]);

  y.domain(data.map(function(d) { return (d.gamedate); }))
    .paddingInner(0.1)
    .paddingOuter(0.5);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "translate(" + width + ",0)")
      .attr("y", 15)
      .style("text-anchor", "end")
      .text("Game Score");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", 0)
      .attr("height", y.bandwidth())
      .attr("y", function(d) { return y(d.gamedate); })
      .attr("width", function(d) { return x(d.value); })
      .on("mouseover", function(d){
      return tooltip.style("visibility", "visible");})
      .on("mousemove", function(d){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+400)+"px");})
      .on("mouseout", function(d){return tooltip.style("visibility", "hidden");})

Answer 1

我认为主要问题是 event 变量未在 mousemove 函数的范围内定义。您可以通过执行以下操作来获取鼠标值:

.on("mousemove", function(d) {
    const [xMouse, yMouse] = d3.mouse(this);
    tooltip.style("top", (yMouse) + "px")
      .style("left", (xMouse) + "px")
      .text(`Gamedate ${d.gamedate} with value ${d.value}`)
})

我做了一个JSbin为了展示我如何让它工作，数据被模拟。