在传单地图上的d3中捕获鼠标悬停 [英] Capture mouseover in d3 on a leaflet map
本文介绍了在传单地图上的d3中捕获鼠标悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有一种方法可以将OpenStreetmap leaflet.js映射与d3.js对象组合在一起，从而在d3对象上捕获鼠标悬停"工具提示?在以下示例中，当鼠标经过蓝色圆圈时，我想创建一个控制台"ook"事件:
Is there a way to combine OpenStreetmap leaflet.js map with d3.js objects in such a way to capture "mouseover" tooltips on d3 objects? In the following example where I would like to create a console "ook" event when the mouse passes over the blue circle:
<!DOCTYPE html>
<html>
<head>
<title>d3.js with leaflet.js</title>
<script src="http://d3js.org/d3.v4.min.js">
</script>
<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js">
</script>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css">
</head>
<body>
<div id="map" style="width: 1350px; height: 662px"></div>
<script type="text/javascript">
var radius = 8;
var map = L.map('map').setView([53.69, -1.14], 14);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
/* Initialize the SVG layer */
L.svg().addTo(map);
/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svg")
, g = svg.append("g");
var data = [{
"node": "interesting",
"x": 641,
"y": 295
}]
var feature = g.selectAll("circle").data(data).enter().append("svg:circle").style("fill", "steelblue").attr("r", 20).attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
}).on("mouseover", function(d) {
console.log("ook" + d.node);
});
</script>
</body>
</html>
在调试中，似乎鼠标事件是在传单代码中捕获的，没有传递给d3.感激收到的帮助或建议
In debug it appears that mouse events are captured in the leaflet code and not passed over to d3. Help or suggestions gratefully received
推荐答案
对于圈子，包括:
.attr(指针事件"，可见")
.attr("pointer-events","visible")
这篇关于在传单地图上的d3中捕获鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
