Map D3-地图上的鼠标事件处理
我正在绘制一张地图，并在上面附加鼠标事件。我正在使用D3库 我使用D3的“on”函数将鼠标事件处理程序注册到“countries path（each country）”。当发生鼠标事件时，它需要在控制台上打印日志（即控制台日志），但它不工作 下面是整个代码。谢谢Map D3-地图上的鼠标事件处理,map,event-handling,d3.js,Map,Event Handling,D3.js,我正在绘制一张地图，并在上面附加鼠标事件。我正在使用D3库 我使用D3的“on”函数将鼠标事件处理程序注册到“countries path（each country）”。当发生鼠标事件时，它需要在控制台上打印日志（即控制台日志），但它不工作 下面是整个代码。谢谢 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=ut
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="../d3.v2.js"></script>
<script type="text/javascript" src="../d3.geo.js"></script>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#counties path {
pointer-events: all;
stroke: #fff;
stroke-width: .25px;
}
/*
#counties path:hover {
stroke: yellow;
fill: orange;
}
*/
#map_legend {
position: relative;
top:0px;
right:0px;
}
</style>
</head>
<body>
<div id="body">
<div id = "map_legend">
<script type="text/javascript">
var width = 960,
height = 500,
centered;
var projection = d3.geo.albersUsa().scale(960*4).translate([800,-50]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("#map_legend").append("svg:svg")
.attr("width", 80) //960
.attr("height", 130); //500
var counties = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.append("g")
.attr("id", "counties");
d3.json("us-counties.json", function(json) {
counties.selectAll("path")
.data(json.features)
.enter().append("svg:path")
.attr("id",function(d,i) { return i;})
.attr("d", path);
});
counties.selectAll("path")
//.attr("pointer-events", "all")
.on("mouseover", function(d) { console.log("path mouseover"); })
.on("mouseout", function(d) { console.log("path mouseout"); })
.on("mousemove", function(d) { console.log("path mouseout");})
.on("touchmove", function(d) { console.log("path mouseout"); })
.on("click", function(d) { console.log("path click"); });
</script>
</div>
</body>
</html>
#县道{
指针事件：全部；
冲程：#fff；
笔划宽度：.25px；
}
/*
#路径：悬停{
笔画：黄色；
填充物：橙色；
}
*/
#地图和图例{
位置：相对位置；
顶部：0px；
右：0px；
}
可变宽度=960，
高度=500，
居中的；
var projection=d3.geo.albersUsa（）.scale（960*4）.translate（[800，-50]）；
var path=d3.geo.path（）.projection（projection）；
var svg=d3。选择（“#映射_图例”）。追加（“svg:svg”）
.attr（“宽度”，80）//960
.attr（“高度”，130）//500
var countries=svg.append（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
.附加（“g”）
.attr（“id”、“县”）；
d3.json（“us countries.json”，函数（json）{
countries.selectAll（“路径”）
.data（json.features）
.enter（）.append（“svg:path”）
.attr（“id”，函数（d，i）{return i；}）
.attr（“d”，路径）；
});
countries.selectAll（“路径”）
//.attr（“指针事件”、“全部”）
.on（“mouseover”，函数（d）{console.log（“path mouseover”）；}）
.on（“mouseout”，函数（d）{console.log（“path mouseout”）；}）
.on（“mousemove”，函数（d）{console.log（“path mouseout”）；}）
.on（“touchmove”，函数（d）{console.log（“path mouseout”）；}）
.on（“单击”，函数（d）{console.log（“路径单击”）；}）；
d3.jsond3.json的回调中