d3.js force-collapsible with labels

Question

Actually I've integrated collapsible feature inside bounded force directed graph. But when I tried to put a label on each node, I got unexpected output.

I used bellow code to append labels on node:

  node.enter().append("text")
            .attr("class","node")
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .on("click",click)
            .text(function(d){return d.name})
            .call(force.drag);

And below code I've written inside a tick function:

node.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
});

What I might be doing wrong?

Answer 1

I need to append the g tag and then circle and text:

  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click)
      .call(force.drag);

  nodeEnter.append("circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 8.5; });

  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);