Javascript 在传单地图上的d3中捕捉鼠标经过_Javascript_D3.js_Leaflet_Mouseover

Javascript 在传单地图上的d3中捕捉鼠标经过

javascript d3.js leaflet

Javascript 在传单地图上的d3中捕捉鼠标经过,javascript,d3.js,leaflet,mouseover,Javascript,D3.js,Leaflet,Mouseover,有没有一种方法可以将OpenStreetmap传单.js map与d3.js对象相结合，从而在d3对象上捕获鼠标悬停的工具提示？在下面的示例中，我想在鼠标经过蓝色圆圈时创建控制台ook事件： <!DOCTYPE html> <html> <head> <title>d3.js with leaflet.js</title> <script src="http://d3js.org/d3.v4.min.js"

有没有一种方法可以将OpenStreetmap传单.js map与d3.js对象相结合，从而在d3对象上捕获鼠标悬停的工具提示？在下面的示例中，我想在鼠标经过蓝色圆圈时创建控制台ook事件：

<!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: '&copy; ' + 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。感谢圈内的帮助或建议，包括：

.attr指针事件，可见

当数据发生变化时，D3是一个很棒的软件包。您是否使用d3将svg元素添加到宣传单中？您希望使用的数据的格式/大小是什么？计划是使用d3转换在多组点上的传单地图上提供工具提示。显然，这里的数据集很小，但使用d3和传单（无工具提示）的工作系统在json和csv中存储了超过500k个点