D3.js Titles on Collapsible Force-Directed graph

Question

So i\'ve been working on a collapsible force-directed graph based of the following example.

Im trying to advance from that and add titles to each node. I\'ve followe

Answer 1

Add titles to node like this.

title = svg.selectAll("text.title")    
     .data(nodes);

title.enter()
    .append("text") //In your code you used title instead of text
    .attr("class", "title")
    .text(function(d) { return d.name; });

title.exit().remove();

Note that titles should be appended after circle nodes. Or else titles may cut off.

Also update the position of title in tick function.

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

Here is the jsfiddle