D3 updating data on parent element wont reflect on child elements - d3.js

Question

Let's consider I need to have a bunch of circles wrapped in <g> elements and I've bound my data to this parents.(initialNodes)
when I press the update button, the update function takes in the new data (newNodes) and I expect the x/y positions of circles to get updated, but as you can see in console, despite the fact that d.x/d.y is correctly printed, it's not taken into account in return d.x and therefore just Enter group is added to canvas.
What am I doing wrong? How can I reflect the updated data on parent <g>, on child elements?
var color = d3.schemeCategory10;
var initialNodes = [
{"id": 0, "x": 50, "y": 50},
{"id": 1, "x": 100, "y": 100},
];
var vis = d3.select("body").append("svg").attr("width", 200).attr("height", 200);
update(initialNodes);
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
var circlesGroup = vis.selectAll("g.stop").data(data, function(d){return d.id});
var circlesEnter = circlesGroup.enter().append("g").attr("class", "stop");
var circlesExit = circlesGroup.exit().remove();
// ENTER
// Create new elements as needed.
circlesEnter
.append("circle")
.attr("r", 15)
.transition().duration(750)
.attr("cx", function (d) {
console.log('ENTERING: id:'+d.id+' position:'+d.x+','+d.y);
return d.x;
})
.attr("cy", function (d) {return d.y;})
.style("fill", 'red');
// UPDATE
// Update old elements as needed.
circlesGroup
.transition().duration(750)
.attr("cx", function (d) {
console.log('ENTERING: id:'+d.id+' position:'+d.x+','+d.y);
return d.x;})
.attr("cy", function (d) {return d.y;});
// EXIT
// Remove old elements as needed.
circlesExit
.remove();
}
var newNodes = [
{"id": 0, "x": 50, "y": 100},
{"id": 1, "x": 50, "y": 30},
{"id": 2, "x": 100, "y": 50}
];
var updateNodes = function() {
update(newNodes);
}
// Add the onclick callback to the button
d3.select("#updatebutton").on("click", updateNodes);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="updatebutton">Update</button>

Answer 1

circleGroup is a selection of g elements. It has no purpose to set cx and cy for a g element.
After creating new nodes select all g.stop and then the containing circle. Why? Read the d3-selection doc.
There is no reason to add the second remove().
var color = d3.schemeCategory10;
var initialNodes = [
{"id": 0, "x": 50, "y": 50},
{"id": 1, "x": 100, "y": 100},
];
var vis = d3.select("body").append("svg").attr("width", 200).attr("height", 200);
update(initialNodes);
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
var circlesGroup = vis.selectAll("g.stop").data(data, function(d){return d.id});
var circlesEnter = circlesGroup.enter().append("g").attr("class", "stop");
var circlesExit = circlesGroup.exit().remove();
// ENTER
// Create new elements as needed.
circlesEnter
.append("circle")
.attr("r", 15)
.style("fill", 'red');
vis.selectAll("g.stop").select("circle")
.transition().duration(750)
.attr("cx", function (d) {
console.log('ENTERING2: id:'+d.id+' position:'+d.x+','+d.y);
return d.x;})
.attr("cy", function (d) {return d.y;});
}
var newNodes = [
{"id": 0, "x": 50, "y": 100},
{"id": 1, "x": 50, "y": 30},
{"id": 2, "x": 100, "y": 50}
];
var updateNodes = function() {
update(newNodes);
}
// Add the onclick callback to the button
d3.select("#updatebutton").on("click", updateNodes);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div><button id="updatebutton">Update</button></div>