D3 v4 Update Object Position on Window Resize - d3.js

Question

I'm working with d3 v4 and struggling to create a simple chart, to use as a reference for further development, which both utilises the d3.zoom() function and the chart resizes to fit the browser window. Whenever I get one of these working the other breaks. The Typescript code is within an Angular 4 component but that shouldn't have an impact.
First I initialise some properties:
// Create a variable to hold the DOM Element which the chart will be attached to.
this.element = this.chartContainer.nativeElement;
// Set the width and height
this.width = this.svgWidth - this.margin.left - this.margin.right;
this.height = this.svgHeight - this.margin.top - this.margin.bottom;
// create scale objects
this.xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, this.width]);
this.yScale = d3.scaleLinear()
.domain([-10, -20])
.range([this.height, 0]);
// create axis objects
this.xAxis = d3.axisBottom(this.xScale);
this.yAxis = d3.axisLeft(this.yScale);
Then I define my zoomFunction():
this.zoomFunction = () => {
if (d3.event.transform != null) {
//console.log(d3.event.transform);
if (this.xScale != null) {
// create new scale ojects based on event
let new_xScale = d3.event.transform.rescaleX(this.xScale);
let new_yScale = d3.event.transform.rescaleY(this.yScale);
// update axes
this.xChartAxis.call(this.xAxis.scale(new_xScale));
this.yChartAxis.call(this.yAxis.scale(new_yScale));
// update circle
this.circles.attr("transform", d3.event.transform)
};
};
};
Define my zoom() function:
this.zoom = d3.zoom().on("zoom", this.zoomFunction);
Define my windowResize() function:
this.onWindowResize =() => {
// Set the width and height.
// The element.offsetWidth is the total width of the DOM element including scrollbars, borders etc.
this.svgWidth = this.element.offsetWidth;
this.svgHeight = this.element.offsetHeight;
// Update the width and height which the chart fits into.
this.width = this.element.offsetWidth - this.margin.left - this.margin.right;
this.height = this.element.offsetHeight - this.margin.top - this.margin.bottom;
// Update the width of the svgViewport.
this.svgViewport.attr("width", this.svgWidth);
this.svgViewport.attr("height", this.svgHeight);
// Update the size of the zoomView
this.zoomView
.attr("width", this.width)
.attr("height", this.height);
// Update the Range of the x scale.
this.xScale.range([0, this.width]);
this.yScale.range([0, this.height]);
// Update the axis.
this.innerSpace.select(".axisY")
.call(this.yAxis);
this.innerSpace.select(".axisX")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxis);
};
Add an EventListener:
window.addEventListener("resize", this.onWindowResize);
Finally create my chart:
createChart() {
// Create a circle
this.originalCircle = {
"cx": 50,
"cy": -15,
"r": 20
};
// Append an svg object to the chart element and save in the variable 'svgViewport'.
this.svgViewport = d3.select(this.element).append('svg')
.attr("class", "chart")
.attr("width", this.svgWidth)
.attr("height", this.svgHeight);
// Inner Drawing Space
this.innerSpace = this.svgViewport.append("g")
.attr("class", "inner-space")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
.call(this.zoom);
// Add the circle.
this.circles = this.innerSpace.append('circle')
.attr("id", "circles")
.attr("cx", this.xScale(this.originalCircle.cx))
.attr("cy", this.yScale(this.originalCircle.cy))
.attr('r', this.originalCircle.r);
// Draw Axis
this.xChartAxis = this.innerSpace.append("g")
.attr("class", "axisX")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxis);
this.yChartAxis = this.innerSpace.append("g")
.attr("class", "axisY")
.call(this.yAxis);
// append zoom area
this.zoomView = this.innerSpace.append("rect")
.attr("class", "zoom")
.attr("width", this.width)
.attr("height", this.height)
.call(this.zoom);
};
The curious thing is that if I refresh the browser and resize the window the axis move and resize as expected, but the circle does not move. When I pan/zoom the circle moves and scales correctly and the axis move correctly. Having pan/zoomed and then resize the window the axis do not move any more and the circle remains static.
I think I am close, but I can't see the next step. Any suggestions very welcome.