In d3.js v4 zoom functionality I am having an issue where when i zoom out and then pan the chart goes out of the viewport instantly - zooming

Question

Here's my code:
var zoom = d3.zoom()
.scaleExtent([0.3, 10])
.on("zoom", zoomed);
function zoomed() {
svg.attr("transform", function(d){
var transform = d3.zoomTransform(this);
return transform;
});
}
var svg = d3.select("#app")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.call(zoom);
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all");
There is no problem if the scaleExtent is [1,10]. The problem only occurs when it is below 1 for the x. If you pan after zooming below 1 the chart translates to some very high value and disappears from the viewport. And its not possible to bring it back.
I have gone through the api docs and didnt find any solution. Please help.
Your help will highly appreciated.

Answer 1

Instead of panning and zooming on the group which holds the rectangle.
svg.attr("transform", function(d){
var transform = d3.zoomTransform(this);
return transform;
});
do transform on the rectangle
function zoomed() {
rect.attr("transform", d3.event.transform);
}
working code here
Or
Better if you add another group(say layer). And in that group add the rectangle. Then apply transform on the group(layer) like this
EDIT
Since you dont want the rectangle to zoom and pan but be a reciever to all mouse events.
Add the rectangle to the svg group like below:
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "red")
.style("pointer-events", "all");
Now create a layer
var layer = svg.append("g");
Add all that you want to zoom and pan in the new layer:
var circle = layer.append("circle")
.attr("cx", 100 )
.attr("cy", 10)
.attr("r", 10)
.style("fill", "blue")
.style("pointer-events", "all");
var circle = layer.append("circle")
.attr("cx", 100 )
.attr("cy", 50)
.attr("r", 10)
.style("fill", "blue")
.style("pointer-events", "all");
var circle = layer.append("circle")
.attr("cx", 300 )
.attr("cy", 50)
.attr("r", 10)
.style("fill", "blue")
.style("pointer-events", "all");
on zoom + pan apply the transform on the group like this
function zoomed() {
layer.attr("transform", d3.event.transform);
}
code is here