Gibt es Beispiele für D3.brush (), die mit Leaflet verwendet werden?

10

Ich habe eine Broschüren-Karte, auf der ich mithilfe des Broschüren-Overlay-Bereichs eine SVG "über" platziert habe. Ich möchte dem Überlagerungsbereich einen D3-Pinsel hinzufügen, der dann ein separates Diagramm aktualisiert. Ich habe mich nach Beispielen für simultane D3.brush () - und Faltblattbeispiele umgesehen, kann aber keine finden.

Das nächste, was ich gefunden habe, war dieses https://github.com/mbostock/d3/issues/1321 und dieses https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/ (Dies bürstet das Diagramm, nicht die Karte).

Ich habe mich gefragt, ob:

  1. Jeder kannte Beispiele, ODER
  2. Jeder wusste, ob dies möglich / einigermaßen einfach war, ODER
  3. Wenn möglich, hatte jemand Tipps zu den Problemen, auf die ich stoßen könnte.
leaflet d3 mdgis
quelle
Hast du das zum Laufen gebracht? Haben Sie festgestellt, dass der Pinsel in Firefox nicht mit Ihrer Maus übereinstimmt?
Frazer Kirkman
Dies ist eine Alternative zu Pinsel - github.com/w8r/leaflet-area-select
Frazer Kirkman

Antworten:

2

Ich habe gerade ein grundlegendes Beispiel gemacht, das auf diesem Block basiert .

Prozess

  • füge deine Ebenengruppe der Karte hinzu (von GeoJSON)

  • Speichern Sie Ihre Ebenengruppe in einer Variablen, dh var layer_group = L.geoJSON(json, {...}).addTo(your_map);

  • In Ihrer brushendedFunktion, iterieren layer_group.eachLayer()und die Verwendung your_map.removeLayer(layer)und your_map.addLayer(layer)die Funktion Sichtbarkeit zu steuern.

Hier ist die JSFiddle: https://jsfiddle.net/0dyjkk2h/2/

Faltblattkarte mit D3-Pinsel

thibautg
quelle
Vielleicht habe ich die Frage nicht richtig verstanden. Möchten Sie in der Lage sein, die Karte oder ein separates Diagramm (wie in meinem Beispiel) zu bürsten?
Thibautg