在 d3.js v4 缩放功能中，我遇到一个问题，当我缩小然后平移时，图表会立即离开视口

Question

这是我的代码：

var zoom = d3.zoom()
.scaleExtent([0.3, 10])
.on("zoom", zoomed);

function zoomed() {
    svg.attr("transform", function(d){ 
        var transform = d3.zoomTransform(this);
        return transform;
    });
}

var svg = d3.select("#app")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
  .call(zoom);

var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all");

scaleExtent为[1,10]没有问题。仅当 x 低于 1 时才会出现此问题。如果您在缩放到 1 以下后平移，图表将转换为某个非常高的值并从视口中消失。而且不可能带回来。

我查看了 api 文档，但没有找到任何解决方案。请帮忙。非常感谢您的帮助。

Answer 1

而不是在包含矩形的组上进行平移和缩放。

svg.attr("transform", function(d){ 
    var transform = d3.zoomTransform(this);
    return transform;
});

对矩形进行变换

function zoomed() {
  rect.attr("transform", d3.event.transform);
}

工作代码here

或

如果你再添加一个组（比如层）就更好了。然后在该组中添加矩形。然后在组（层）上应用变换，如 this

编辑

因为您不想让矩形缩放和平移，而是希望它成为所有鼠标事件的接收者。

将矩形添加到 svg 组，如下所示：

var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "red")
    .style("pointer-events", "all");

现在创建图层

var layer = svg.append("g");

在新图层中添加所有要缩放和平移的内容：

var circle = layer.append("circle")
    .attr("cx", 100 )
    .attr("cy",  10)
    .attr("r",  10)
    .style("fill", "blue")
    .style("pointer-events", "all");

var circle = layer.append("circle")
    .attr("cx", 100 )
    .attr("cy",  50)
    .attr("r",  10)
    .style("fill", "blue")
    .style("pointer-events", "all");


var circle = layer.append("circle")
    .attr("cx", 300 )
    .attr("cy",  50)
    .attr("r",  10)
    .style("fill", "blue")
    .style("pointer-events", "all");

在缩放 + 平移时像这样对组应用变换

function zoomed() {
  layer.attr("transform", d3.event.transform);
}

代码是 here

在 d3.js v4 缩放功能中，我遇到一个问题，当我缩小然后平移时，图表会立即离开视口

In d3.js v4 zoom functionality I am having an issue where when i zoom out and then pan the chart goes out of the viewport instantly

data-visualization

zooming

d3.js