使用d3的内置鼠标事件获取正确的坐标值。具体操作为:
Name:
Value:
.hidden {
display: none;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
border: 1px solid gray;
pointer-events: none;
}
//定义鼠标提示框
var tooltip = d3.select("#tooltip");
//定义缩放事件
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
//获取地图路径
var path = d3.geo.path()
.projection(projection);
//添加地图
var map = svg.append("g")
.attr("class", "map")
.call(zoom)
.call(zoom.event);
//添加地图路径
map.selectAll("path")
.data(topojson.feature(data, data.objects.subunits).features)
.enter().append("path")
.attr("d", path)
.on("mouseover", function(d) {
//获取鼠标坐标
var coordinates = d3.mouse(this);
//设置提示框坐标与信息
tooltip.attr("style", "left:" + (coordinates[0] + 10) + "px;top:" + (coordinates[1] + 10) + "px")
.classed("hidden", false)
.select("#name").text(d.properties.name)
.select("#value").text(d.properties.value);
})
.on("mouseout", function() {
//隐藏提示框
tooltip.classed("hidden", true);
});
通过以上操作,即可获取正确的鼠标坐标并将其赋值给鼠标提示框,从而解决原先的坐标错误问题。