仅对选定元素禁用缩放

Question

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

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

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

这是我试过但没有效果：

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

更新

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

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 */