Question

我能够通过定义文本来获得工作提示，但对于我的生活，我无法获得工具提示来从数据文件中打印文本。我觉得我正在弄乱定义d.value，即使它被绘制得很好但我也想知道是否有一些我不知道的v4。我已经尝试过将var语句移动到所有地方，但似乎没有任何帮助。它通常最终成为＆＃34;无法读取未定义的属性＆＃34;错误。我对自己做错了什么的想法？感谢。

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

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

mousemove

我制作了一个JSbin以显示我是如何让它工作的，数据被模拟了。

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

1 个答案: