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

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

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


function getmouseoverdata(d) {
    return d;
}

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

但我想在相应位置显示该值。我该如何实现？

最佳答案

如果仅在将鼠标悬停在path / rect元素上时显示数据元素，则可以尝试在创建标题时将标题直接添加到这些元素上吗？

例如：

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和条形图大小之间的差开始，从而有效地将顶部到底部的图变成底部到顶部的图。