我需要在使用 d3.js 将鼠标悬停在折线图/条形图上时在相应位置显示值
var toolTip = svg.selectAll("path")
.append("svg:title")
.text(getmouseoverdata(data)
);
function getmouseoverdata(d) {
return d;
}
在这里，当鼠标悬停在图表中的任何位置时，我会获取数组中的所有数据。
但我想在相应的位置显示值。我怎样才能实现它？
【问题讨论】：
标签： javascript backbone.js angularjs d3.js javascript-framework
您可以像这样使用 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})
此添加将导致条形图从图表的 maxHeight 和条形图大小之间的差值开始，从而有效地将自上而下的图表转变为自下而上的图表。
【讨论】：