How to update line chart points when the source data changes - d3.js

Question

I've created a multi-line chart from the following source data.
[
{
"key":"108",
"title":"Series 1",
"items":[
{
"key":"54048872e9c2021fd8231051",
"value":1.0
},
{
"key":"540488a1e9c2021fd823107b",
"value":2.0
}
]
},
{
"key":"15",
"title":"Series 2",
"items":[
{
"key":"54048872e9c2021fd8231051",
"value":1.0
},
{
"key":"540488a1e9c2021fd823107b",
"value":4.0
}
]
}
]
We render a line for each Series and circles for each data "point"
var series = svg.selectAll('.series')
.data(this.data)
.enter()
.append('g')
.attr('class', 'series');
series.append('path')
.attr('class', 'line');
// add points to chart
var points = series.append('g')
.attr('class', 'point')
.selectAll('circle')
.data(function (d) {
return d.items;
})
.enter()
.append('circle')
.attr('r', 5);
Then when we first render the chart or when the window resizes we actually set the coordinates of the line and circles:
this.svg.selectAll('.line')
.attr('d', function (d) {
return chart.line(d.items);
});
this.svg.selectAll('.point circle')
.attr('cx', function (d) { return chart.xScale(d.key); })
.attr('cy', function (d) { return chart.yScale(d.value); });
Here, chart.line corresponds to a d3 line generator previously created.
When the source data changes I can update the line by setting its data:
this.svg.selectAll('.line')
.data(this.data);
But I can't figure out how to do the same thing with the data points (circles).
I've tried the following but the data on the individual point is not actually updated. Here the first console log (after selecting the .point elements) returns the correct data but the cx attribute function is returning the old data.
var series = this.svg.selectAll('.series')
.data(this.data)
.selectAll('.point')
.data(function (d) {
console.log(d.items);
return d.items;
})
.selectAll('circle')
.attr('class', 'updated')
.attr('cx', function (d) { console.log(d); return chart.xScale(d.key); })
.attr('cy', function (d) { return chart.yScale(d.value); });