1
Есть ли способ объединить карту OpenStreetmap leaflet.js с объектами d3.js таким образом, чтобы захватывать всплывающие подсказки на мыши на объектах d3? В следующем примере, где я хотел бы создать консольное «Уки» событие, когда мышь проходит над синим кругом:Захват мыши в d3 на карте лифлета
<!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/[email protected]/dist/leaflet.js">
</script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/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. Помощь или предложения с благодарностью получило
D3 является большим пакетом, когда данные изменения. Используете ли вы d3 для добавления элементов svg svg в Leaflet? Каков формат/размер данных, которые вы ожидаете использовать? –
План (такой как он) заключается в использовании переходов d3 для предоставления всплывающих подсказок по карте листовка на нескольких наборах точек. Очевидно, что набор данных здесь мал, но рабочие системы, использующие d3 и листовки без всплывающих подсказок, имеют более 500 тыс. Точек, хранящихся в json и csv – Guido