d3.js - 仅禁用对选定元素的缩放

Question

我有一个简单的 SVG，它可以缩放和平移。

我想做的是只禁止对某些元素进行缩放，但保持平移，元素必须保持相对于彼此的位置。

因此在下面的示例中，红色圆圈可以平移和缩放，但蓝色圆圈只能平移 - 例如 map 标记，红色圆圈是地球

这是我试过但没有效果:

zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([1.3, 10])
        .on("zoom", zoomed);

function zoomed() {
  map.attr("transform", "translate(" + d3.event.translate + ")" + 
    " scale(" + d3.event.scale + ")")
}

svgWidth = 1890;
svgHeight = 932;

map = d3.select("body")
        .append("svg")
        .attr({
            "width": svgWidth,
            "height": svgHeight,
            "id": "svg"
        })
        .call(zoom)
        .append("g");

var circle = map.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 20)
  .attr("fill", "red");

var circle2 = map.append("circle")
  .attr("cx", 140)
  .attr("cy", 140)
  .attr("r", 20)
  .attr("fill", "blue")
  .on('mousedown.zoom', null); // <-- no zoom on this element

D3 是否可行？

Here's a fiddle showing the full SVG example

更新

我刚刚注意到谷歌地图有类似的东西 - 如果你精确定位一个地方(或几个地方)，就会出现一个标记，无论缩放如何，都会保持(几乎)相同的大小，但会随 map 平移。这就是我想要实现的目标。

I have seen this question ，我的问题不是重复的，因为它也停止了平移，这是我不想要的

Answer 1

每当 UI 放大时，您都需要消除缩放对目标对象的影响:

function zoomed() {
  map.attr("transform", "translate(" + d3.event.translate + ")" + 
    " scale(" + d3.event.scale + ")");
  d3.selectAll(".exclude-from-zoom").attr("transform", "scale(" + d3.event.scale + ")");
}

/* ... */

var circle2 = map.append("circle")
  .attr("class", "exclude-from-zoom")
  .attr( ... /* do the rest, excluding the on() event call */