Des exemples de D3.brush () utilisés avec Leaflet?

10

J'ai une carte de dépliant sur laquelle j'ai placé un SVG "au-dessus" à l'aide du volet de superposition de dépliant. Je veux ajouter un pinceau D3 au volet de superposition qui mettra ensuite à jour un graphique distinct. J'ai cherché des exemples d'exemples simultanés de D3.brush () et de dépliants, mais je n'arrive pas à en trouver.

La chose la plus proche que j'ai trouvée était cette https://github.com/mbostock/d3/issues/1321 et cette https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/ (c'est brosser le graphique et non la carte).

Je me demandais si:

  1. Tout le monde connaissait des exemples, OU
  2. Tout le monde savait si c'était possible / assez simple OU
  3. Si possible, n'importe qui avait des conseils sur le genre de problèmes que je pourrais rencontrer.
leaflet d3 mdgis
la source
Avez-vous réussi à le faire fonctionner? Avez-vous trouvé que le pinceau ne s'alignait pas avec votre souris dans Firefox?
Frazer Kirkman
Ceci est une alternative au pinceau - github.com/w8r/leaflet-area-select
Frazer Kirkman

Réponses:

2

Je viens de faire un exemple de base basé sur ce bl.ock .

Processus

  • ajoutez votre groupe de couches à la carte (depuis GeoJSON)

  • enregistrez votre groupe de calques dans une variable, c'est-à-dire var layer_group = L.geoJSON(json, {...}).addTo(your_map);

  • Dans votre brushendedfonction, parcourez layer_group.eachLayer()et utilisez your_map.removeLayer(layer)et your_map.addLayer(layer)pour contrôler la visibilité de la fonction.

Voici le JSFiddle: https://jsfiddle.net/0dyjkk2h/2/

Carte de brochure avec brosse D3

thibautg
la source
Peut-être que je n'ai pas bien compris la question. Voulez-vous pouvoir brosser sur la carte ou sur un graphique séparé (comme dans mon exemple)?
thibautg