¿Algún ejemplo de D3.brush () usado con Leaflet?

10

Tengo un mapa de folleto en el que he colocado un SVG "encima" usando el panel de superposición de folleto. Quiero agregar un pincel D3 al panel de superposición que luego actualizará un gráfico separado. He buscado ejemplos de D3.brush () y folletos simultáneos, pero parece que no puedo encontrar ninguno.

Lo más parecido que encontré fue este https://github.com/mbostock/d3/issues/1321 y este https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/ (esto es rozar el gráfico, no el mapa).

Me preguntaba si:

  1. Alguien sabía de algún ejemplo, O
  2. Alguien sabía si esto era posible / razonablemente sencillo, O
  3. Si es posible, alguien tenía algún consejo sobre el tipo de problemas que podría encontrar.
leaflet d3 mdgis
fuente
¿Funcionó esto? ¿Encontraste que el pincel no se alineaba con tu mouse cuando estabas en Firefox?
Frazer Kirkman
Esta es una alternativa al pincel - github.com/w8r/leaflet-area-select
Frazer Kirkman

Respuestas:

2

Acabo de hacer un ejemplo básico basado en este bl.ock .

Proceso

  • agregue su grupo de capas al mapa (desde GeoJSON)

  • guarde su grupo de capas en una variable, es decir var layer_group = L.geoJSON(json, {...}).addTo(your_map);

  • En su brushendedfunción, repita layer_group.eachLayer()y use your_map.removeLayer(layer)y your_map.addLayer(layer)para controlar la visibilidad de la función.

Aquí está el JSFiddle: https://jsfiddle.net/0dyjkk2h/2/

Mapa de folleto con pincel D3

thibautg
fuente
Tal vez no entendí correctamente la pregunta. ¿Desea poder pincel en el mapa o en un gráfico separado (como en mi ejemplo)?
thibautg