How to add text to circle in force collapsible layout d3.js

Question

I'm working on force directed collapsible using this source https://bl.ocks.org/mbostock/1062288. It went well and i can adjust the circle size, gravity, etc but when i add text into the circle eventually the circle went static (can not be dragged) like in this image, static circle

This is my code to add text

node.enter().append("circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
  .style("fill", color)
  .on("click", click)
  .call(force.drag);
 
node.enter().append("text")
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .text(function(d) { return d.name; });

I already tried this code too but it didn't work.

var circle = node.enter().append("circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
  .style("fill", color)
  .on("click", click)
  .call(force.drag);
 
circle.append("text")
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .text(function(d) { return d.name; });