D3v4 zoom coordinates of visible area - zooming

Question

I'm trying to calculate the coordinates of the visible area after zooming. Is there a way to calculate it using d3.event.transform?
I tried a lot but couldn't make it work, at least not for d3v4. Using v3 is no opinion since everything else of the project is using v4.
Isolated Code: https://jsfiddle.net/qyvnhvmj/

Answer 1

All you need to do is grab the inverse of the points from the transform,
var width = 800,
height = 400,
Radius = 20;
var Circles, Data = [];
for (var i = 0; i < 3; i++) {
Data.push({
x: 100 + i * Radius * 8,
y: 100,
});
}
var zoom = d3.zoom().scaleExtent([1, 128]).on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.style("fill", d3.color("gray"))
.attr("opacity", 0.1);
Circles = svg.selectAll("circle")
.data(Data)
.enter().append("circle")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", Radius);
function getVisibleArea(t) {
var l = t.invert([0, 0]),
r = t.invert([width, height]);
return Math.trunc(l[0]) + " x " + Math.trunc(l[1]) + " - " + Math.trunc(r[0]) + " x " + Math.trunc(r[1]);
}
function zoomed(d) {
Circles.attr("transform", d3.event.transform);
console.log("zoom transform: ", d3.event.transform);
d3.select("#area span").text(getVisibleArea(d3.event.transform));
}
svg {
position: absolute;
top: 50;
}
<svg width="800" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<a id="area">visible area: <span>?</span></a>
<br>
<br>