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

【问题标题】：D3 scatter plot - visible points outside the chart after zoomD3 散点图 - 缩放后图表外的可见点
【发布时间】：2015-02-26 01:00:30
【问题描述】：

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

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

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

非常感谢。

【问题讨论】：

标签： d3.js

【解决方案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")
    ...

【讨论】：