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

仅禁用所选元素的缩放

1 个答案: