I'm facing an issue where the shapes generated inside a G element are larger than the container.
Despite trying different methods, most examples I come across have hardcoded sizes and coordinates. Even when attempting to calculate offsets, the output of zoom.scaleTo() and zoom.translateTo() seems to be different from what I'm inputting.
It appears that scaling with SVG may cause coordinate offsets, which could be the root of the problem.
In a code pen I created, I added two Rects within a G element, which is then appended to another G (referenced as this.g in my code).
You can view the Codepen Here
This is the function where the adjustment needs to take place:
function setUpZoomAndCenterG() {
let zoom = d3.zoom()
.extent([
[0, 0],
[this.targetDiv.clientWidth, this.targetDiv.clientHeight],
])
.scaleExtent([-1, 8])
.on('zoom', (e) => {
this.g.attr('transform', e.transform);
// console.log(e)
})
this.svg.call(zoom);
// Need to center the red boxes and fit them to the window. with a margin of 0.05/5% it wuld also need to take into account landscape and portrait
// zoom.scaleTo()
// zoom.translateTo()
}I expect the output to resemble this: https://i.sstatic.net/cEV9l.png
If anyone has encountered a similar issue before and can guide me through the process, it would be greatly appreciated.