Javascript D3散点图未正确实现缩放交互

我是D3的新手，我试图在散点图上实现缩放/平移功能。不幸的是，在遵循教程之后，每当我缩放可视化时，轴刻度都会消失，但可视化不会重新调整。有人能解释一下我做错了什么吗

//Adding zoom and pan interaction to visualization
         var zoom = d3.zoom()
            .scaleExtent([.5, 20])
            .extent([0, 0], [width, height])
            .on("zoom", zoomed);

// This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
        svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all")
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
            .call(zoom);
 function zoomed(){
            // recover the new scale
            var newX = d3.event.transform.rescaleX(xScale);
            var newY = d3.event.transform.rescaleY(yScale);

            // update axes with these new boundaries
            xAxis.call(d3.axisBottom(newX))
            yAxis.call(d3.axisLeft(newY))

            //update positions
            dotGraph.selectAll("circle")
                .attr("cx", d => newX(d.installs))
                .attr("cy", d => newY(d.reviews));
        }  

完整代码位于此处：

---

谢谢。

如果您注释掉代码的区段部分，您将看到缩放效果如预期一样，减去区段的强制执行

如果没有为

zoom.extent（）

提供有效的区段，则传递两个数组：

.extent([0, 0], [width, height])

而不是一个

[[0,0]，[width，height]]

但这仍然无法修复缩放行为的范围，我相信您正在寻找限制图表平移范围的

translateExtent

——但是，如果我们使用

[[0,0]，[width，height]]

，则无法缩小到0.5：显示的范围将大于平移范围。因此，我们不妨将最小比例设置为1

这样做，我们就得到了

此外，在缩放功能中，您正在选择

dotGraph

中的所有圆，但是

dotGraph

已经是一个圆的选择-因此我们可以在缩放功能中删除

selectAll（“圆”）

方法。否则圆圈将不会更新