javascript - d3-annotation + d3-zoom - Zooming without scaling

Question

I'm new to d3. I've been looking everywhere for an example of how to do this. But essentially, I created a bunch of d3-annotations on an svg, pointing to various x,y coordinates. My project is a mapping project, so I created a zoom function as such:

d3
.zoom()
.scaleExtent([1, 100])
.on('zoom', event => {
    g1.attr('transform', event.transform);
})

This works great for scaling up the map and the circles I've added to the map separately. However the annotations also grow equally large. How can I "transform" or "scale" the map / group (g) such that the annotations continue to point at the proper locations, but the rendered annotation doesn't also get significantly large with it.

Answer 1

When zooming, you apply a transform on the g1 group. Applying a transform on a <g> will scale all the elements within. A possible design would be to have two groups, one that is affected by the zoom (here g1 in your code) and another that is not:

<svg>
<g class="zoomable">
 <!-- the rest, zoomable -->
</g>
<g class="not-zoomable">
 <!-- annotations -->
</g>

Then, in your code, put the annotations in the not-zoomable group, and have the zoom transform the zoomable group only:

let zoomableGroup = d3.select(".zoomable")
d3
 .zoom()
 .scaleExtent([1, 100])
 .on('zoom', event => {
    zoomableGroup.attr('transform', event.transform);
 })