1
Gibt es eine Möglichkeit, OpenStreetmap leaflet.js Karte mit d3.js Objekte zu kombinieren, um "mouseover" Tooltips auf d3 Objekte zu erfassen? Im folgenden Beispiel, wo würde Ich mag eine Konsole „ook“ Ereignis erstellen, wenn die Maus über den blauen Kreis passiert:Capture Mouseover in d3 auf einem Prospekt Karte
<!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>
Im Debug es, dass Mausereignisse in der Broschüre Code erfasst wird und nicht übergangen d3. Hilfe oder Anregungen erhielten dankbar
D3 ist ein großes Paket, wenn Daten zu ändern. Verwenden Sie d3, um einfach svg svg Elemente zu Leaflet hinzuzufügen? Was ist das Format/die Größe der Daten, die Sie verwenden möchten? –
Der Plan (so wie er ist) besteht darin, d3-Übergänge zu verwenden, um Tooltips über eine Flugblatt-Map auf mehreren Punktmengen bereitzustellen. Klar ist der Datensatz hier klein, aber die Arbeitssysteme, die d3 und das Merkblatt ohne Tooltips verwenden, haben über 500.000 Punkte in JSON und CSV – Guido