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

Question

我是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);
}

您可以在此处查看工作示例(以及所有代码)

有没有办法可以定义缩放范围的"区域",所以这个区域外的任何点都不可见？或者我可以在缩放功能中添加一些东西来解决这个问题吗？

非常感谢你.

Answer 1

一种选择g是使用剪辑路径限制绘制点的元素区域

有关代码,请参见http://jsfiddle.net/henbox/duwyay3y/1/.

首先定义剪辑路径:

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")
    ...