D3 force layout text label overlapping

Question

I have a hard time positioning text label on my force chart. They are overlapping each other, and I could not figure out how to fix it. And I've tried many solutions from online, none of them works well. Could you please help me take a look?

Here are the code for my text labels:

    var node_text = node_textNew.append("svg:text")
    .attr("class", "text_note")
    .attr("dx", 0)
    .attr("dy", -0.5)
    .attr('background-color', '#fff')
    .attr("x",    function(d, i) { return circleWidth + 5; })
    .attr("y",  function(d, i) { if (i>0) { return circleWidth + 0 } else { return 8 } })
    .text(function(d) { return d.name});

Here is how it looks right now:

Thank you so much for your help!

Answer 1

Try this one http://bl.ocks.org/MoritzStefaner/1377729. Here the author introduces a way when a label is placed near a node using another force layout.

Answer 2

One easy solution I have found us to use the center of a nodes Voronoi cell as the anchor for a label. This gives you the optimal spacing provided by your graph.

An example of this is seen in: https://bl.ocks.org/mbostock/6909318