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