javascript - d3-annotation + d3-zoom - 缩放而不缩放

Question

我是 d3 的新手。我一直在到处寻找如何做到这一点的例子。但本质上，我在 svg 上创建了一堆 d3-annotations，指向各种 x,y 坐标。我的项目是一个映射项目，所以我创建了一个缩放功能:

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

这对于放大 map 和我分别添加到 map 中的圆圈非常有用。然而，注释也变得同样大。我如何“转换”或“缩放” map /组 (g)，以便注释继续指向正确的位置，但渲染的注释也不会因此变得很大。

Answer 1

缩放时，对 g1 组应用变换。在 <g> 上应用变换将缩放其中的所有元素。一种可能的设计是有两组，一组受缩放影响(代码中的 g1)，另一组不受缩放影响:

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

然后，在您的代码中，将注释放在 not-zoomable 中组，并让缩放变换 zoomable仅限组:

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