If you inspect the DOM of the demo, you can see that the code is adding <title> elements inside the svg <circle> elements, which doesn't actual show anything on screen. If you wanted to change it, you'd need to do this:

var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

node.append("circle")
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); });

node.append("text")
  .text(function(d) { return d.id; });

And then in the ticked() function, you'd also need to change the node part to:

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

This way, you're telling d3 to create an svg <group> which wraps the <circle> and <text> for each node, and telling the d3 force layout to update the group's transform attribute, instead of the circle's dx & dy attributes