在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