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

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

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

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

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

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

例如:

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

此添加将导致条形图从图形的最大高度和条形图大小之间的差值开始,从而有效地将从上到下的图形转换为从下到上的图形。