d3 text elements not rendering inside circle - d3.js

Question

I'm trying to add texts to svg circles. I've read other posts about using the grouping "g" tag, and I've tried that, but my text still isn't rendering. I see the text element exists in the console though.
Here's the relevant code:
var node = svg
.selectAll(".node")
.data(data.nodes)
.enter()
.append("g")
.attr("class", "node")
.call(
d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
node
.append("circle")
.attr("r", (d) => {
return d.type === "application" ? 50 : 20;
})
.attr("fill", (d) => {
return d.type === "application" ? "red" : "blue";
});
node
.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function (d) {
return d.name;
});
force.on("tick", function () {
link
.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
node.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
function dragstarted(d) {
if (!d3.event.active) force.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) force.alphaTarget(0);
d.fx = null;
d.fy = null;
}
Added correct code based on accepted answer.
Why is this still not rendering?

Answer 1

One way you can solve this is to bind your data to the group elements first and then append circles and text individually. So your code becomes:
var node = svg
.selectAll("g")
.data(data.nodes)
.enter().append("g")
.attr("class", "nodes");
node
.append("circle")
// all circle-related code
node
.append("text")
// all text related code, including x and y
Only two (AFAIK) svg elements allow other elements to be nested within them: g and text. When you call append on the selection of circles, you're appending a text element as a child of circle - which it doesn't support.