javascript - 如何在 d3.js 中鼠标悬停时获取相应位置的值？

Question

我需要在使用 d3.js 将鼠标悬停在折线图/条形图上时在相应位置显示值

var toolTip = svg.selectAll("path")
.append("svg:title")
.text(getmouseoverdata(data)
);


function getmouseoverdata(d) {
    return d;
}

在这里，当鼠标悬停在图表中的任何位置时，我会获取数组中的所有数据。

但我想在相应的位置显示值。我怎样才能实现它？

Answer 1

您可以像这样使用 d3js 鼠标事件处理程序

var coordinates = [0, 0];
coordinates = d3.mouse(this);

var x = coordinates[0];
var y = coordinates[1];

它将为您提供当前的鼠标坐标。

Answer 2

如果您只想在将鼠标悬停在路径/矩形元素上时显示数据元素，您可以尝试在创建这些元素时直接将标题添加到这些元素上？

例如：

var data = [0, 1, 2, 3, 4, 5],
    size = 300;

var canvas = d3.select("body")
               .append("svg:svg")
                    .attr("width", size)
                    .attr("height", size);

var pixels = size / data.length;

canvas.selectAll("rect").data(data).enter().append("svg:rect")
      .attr("fill", "red")
      .attr("height", function(d){return d * pixels})
      .attr("width", pixels/2)
      .attr("x", function(d,i){return i * pixels})
      .attr("y", 0)
      .append("title")    //Adding the title element to the rectangles.
      .text(function(d){return d});

如果您将鼠标悬停在矩形上，此代码应创建五个矩形，其数据元素显示在工具提示中。

希望这可以帮助。

---

根据评论编辑：

对于自下而上的图表，您可以像这样更改 y 属性：

.attr("y", function(d){return size - d * pixels}) 

此添加将导致条形图从图表的 maxHeight 和条形图大小之间的差异开始，从而有效地将自上而下的图表转变为自下而上的图表。