Any Examples of D3.brush() used with Leaflet?

Question

I have a leaflet map that I have placed an SVG "on top of" using the leaflet overlay pane. I want to add a D3 brush to the overlay pane that will then update a separate chart. I've looked around for any examples of simultaneous D3.brush() and leaflet examples but can't seem to find any.

The closest thing I found was this https://github.com/mbostock/d3/issues/1321 and this https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/ (this is brushing the chart not the map).

I was wondering if:

1. Anyone knew of any examples, OR
2. Anyone knew if this was possible/reasonably straightforward, OR
3. If possible, anyone had any tips on the sort of issues I might encounter.

Answer 1

I've just made one basic example based on this bl.ock.

Process

• add your layer group to the map (from GeoJSON)

• save your layer group in a variable, i.e. var layer_group = L.geoJSON(json, {...}).addTo(your_map);

• In your brushended function, iterate over layer_group.eachLayer() and use your_map.removeLayer(layer) and your_map.addLayer(layer) to control the feature's visibility.

Here is the JSFiddle: https://jsfiddle.net/0dyjkk2h/2/