I have a number of lines drawn with D3.js on a Leaflet map representing pipes. What’s the best way of making some of them show/disappear based on zoom level and pipe diameter? I have tried going through documentation and examples using enter() and exit() but wasn’t successful—I’m using map.getZoom() to get the zoom.
Here is how I’m drawing the lines:
const lines_bound = g.selectAll('path').data(data.features).join('path')
// draPipeSelection is a somewhat long function draw the paths (.attr("p", pathCreator)) and formats the lines.
drawPipeSelection(lines_bound)
Here’s how I’m redrawing them when I zoom and pan (I know, it’s pretty stupid to draw elements just to remove them right then):
// criteria do whether or not pipe is to be shown
let diameter = 'diameter';
// Function to place svg based on zoom
function isDistributionMain(d) {
return d.properties[diameter] >= 12;
}
function onZoom() {
console.log(map.map.getZoom());
let isZommed = map.map.getZoom() >= 15;
lines_bound.data(data.features.filter(d => isDistributionMain(d) || isZommed))
.join(
enter => drawPipeSelection(enter),
update => drawPipeSelection(update),
exit => exit.remove()
)
}
// initialize positioning
onZoom();
// // reset whenever map is moved
map.map.on('zoomend', onZoom);
map.map.on('moveend', onZoom);
[EDIT] Is this an appropriate place to ask questions about D3.js?
