Algum Exemplos de D3.brush () usado com Leaflet?

10

Eu tenho um mapa de folheto em que coloquei um SVG "em cima de" usando o painel de sobreposição de folheto. Desejo adicionar um pincel D3 ao painel de sobreposição que atualizará um gráfico separado. Procurei por exemplos de exemplos simultâneos de D3.brush () e de folheto, mas não consigo encontrar nenhum.

O mais próximo que encontrei foi este https://github.com/mbostock/d3/issues/1321 e este https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/ (isso está escovando o gráfico, não o mapa).

Fiquei me perguntando se:

  1. Alguém sabia de exemplos, OU
  2. Alguém sabia se isso era possível / razoavelmente simples, OU
  3. Se possível, alguém tinha alguma dica sobre o tipo de problemas que eu poderia encontrar.
leaflet d3 mdgis
fonte
Você conseguiu isso funcionando? Você achou que o pincel não estava alinhado com o mouse no Firefox?
Frazer Kirkman
Isto é uma alternativa à escova - github.com/w8r/leaflet-area-select
Frazer Kirkman

Respostas:

2

Acabei de fazer um exemplo básico com base neste bloco .

Processo

  • adicione seu grupo de camadas ao mapa (de GeoJSON)

  • salve seu grupo de camadas em uma variável, ou seja, var layer_group = L.geoJSON(json, {...}).addTo(your_map);

  • Em sua brushendedfunção, itere layer_group.eachLayer()e use your_map.removeLayer(layer)e your_map.addLayer(layer)para controlar a visibilidade do recurso.

Aqui está o JSFiddle: https://jsfiddle.net/0dyjkk2h/2/

Mapa de folheto com escova D3

thibautg
fonte
Talvez eu não tenha entendido corretamente a pergunta. Deseja escovar no mapa ou em um gráfico separado (como no meu exemplo)?
thibautg