D3 scatter plot - visible points outside the chart after zoom - d3.js

Question

I'm new to D3 and I've a question related to adding zoom into a chart.
I built a scatter plot with zoom/pan and everything is working except for the fact that when I use the zoom on the chart, I can see some points outside the chart "area" and I really want to avoid that.
The zoom behavior looks like this:
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1, 10])
.on("zoom", zoomed);
And the zoomed function like this:
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);
}
You can see a working example (and all the code) here
Is there a way I can define the "area" of scope for the zoom, so any point outside this area is not visible? or can I add something into the zoomed function to fix this?
Thank you very much.

Answer 1

One option would be to restrict the g region of the element in which your points are drawn using a clip path
See http://jsfiddle.net/henbox/duwyay3y/1/ for the code.
First define your clip path:
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);
then add to the g element
main.append("g").attr("clip-path", "url(#clip)")
.selectAll("circle")
...