D3.js D3散点图-缩放后图表外的可见点

我是D3新手，我有一个关于添加图表缩放的问题

我用缩放/平移建立了一个散点图，除了在图表上使用缩放时，我可以看到图表“区域”之外的一些点，我真的想避免这种情况

缩放行为如下所示：

var zoom = d3.behavior.zoom()
            .x(xScale)
            .y(yScale)
            .scaleExtent([1, 10])
            .on("zoom", zoomed);

function zoomed() {
    var panX = d3.event.translate[0];
    var panY = d3.event.translate[1];
    var scale = d3.event.scale;

    panX = panX > 10 ? 10 : panX;
    var maxX = -(scale-1)*width-10;
    panX = panX < maxX ? maxX : panX;

    panY = panY > 10 ? 10 : panY;
    var maxY = -(scale-1)*height-10;
    panY = panY < maxY ? maxY : panY;

    zoom.translate([panX, panY]);


    main.select(".x.axis").call(xAxis);
    main.select(".y.axis").call(yAxis);
    main.selectAll("circle")
        .attr("cx", function (d,i) { return xScale(d[0]); } )
        .attr("cy", function (d) { return yScale(d[1]); } )
        .attr("r", 5);
}

缩放功能如下所示：

var zoom = d3.behavior.zoom()
            .x(xScale)
            .y(yScale)
            .scaleExtent([1, 10])
            .on("zoom", zoomed);

function zoomed() {
    var panX = d3.event.translate[0];
    var panY = d3.event.translate[1];
    var scale = d3.event.scale;

    panX = panX > 10 ? 10 : panX;
    var maxX = -(scale-1)*width-10;
    panX = panX < maxX ? maxX : panX;

    panY = panY > 10 ? 10 : panY;
    var maxY = -(scale-1)*height-10;
    panY = panY < maxY ? maxY : panY;

    zoom.translate([panX, panY]);


    main.select(".x.axis").call(xAxis);
    main.select(".y.axis").call(yAxis);
    main.selectAll("circle")
        .attr("cx", function (d,i) { return xScale(d[0]); } )
        .attr("cy", function (d) { return yScale(d[1]); } )
        .attr("r", 5);
}

函数缩放（）{
var panX=d3.event.translate[0]；
var panY=d3.event.translate[1]；
var标度=d3.event.scale；
panX=panX>10？10:panX；
var maxX=-（标度-1）*宽度-10；
panX=panX10？10:panY；
var maxY=-（刻度-1）*高度-10；
panY=panY

您可以看到一个工作示例（以及所有代码）

有没有一种方法可以定义缩放范围的“区域”，使该区域之外的任何点都不可见？或者我可以在缩放函数中添加一些东西来修复这个问题吗

---

非常感谢。

一个选项是限制使用剪辑路径绘制点的元素的

g

区域

有关代码，请参阅

首先定义剪辑路径：

var clip = main.append("defs").append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("id", "clip-rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr('width', width)
    .attr('height', height);

然后添加到

g

元素

main.append("g").attr("clip-path", "url(#clip)")
    .selectAll("circle")
    ...