Another D3 add text to Forced Directed Graph

Question

 .link {
    stroke: #999;
    stroke-opacity: .2;
  }

.node  {
  stroke: #000;
  stroke-width: 1.5px;
  font: 10px sans-serif; 
}

Now you can get the rest from: http://bl.ocks.org/mbostock/950642

But here is what I want to do: I want to get rid of the github image in the example above, replace it with a black circle (see image), and have the name to the right of the circle and if the circle is dragged it moves along with the circle (to the right).

I cannot figure out how to do this. I can get the names displayed, but I cannot get the circles to display. And it happens that the names are to the right of where the black circles should be, but I just got lucky. (Side question: how would you get them to the left?)

Answer 1

Append circle to each node.

Try this code:

DEMO

  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
       .attr("r", 6);