5

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: enter image description here

Thank you so much for your help!

Ellie Zhu
  • 83
  • 1
  • 6
  • [This question](https://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion) should help. – Lars Kotthoff Nov 09 '15 at 18:34
  • I've tried. It's not working on my graph. The labels will be too far away from the circles. – Ellie Zhu Nov 09 '15 at 18:37
  • @EllieZhu, that's a lot of labels in a tight space. What alternatives exist besides moving the labels away from the circles? – Mark Nov 09 '15 at 19:36
  • One of the alternative will be not showing the labels at the same time. It will be less crowded, but I still have to figure out how to move them around. – Ellie Zhu Nov 09 '15 at 20:38
  • On option i can suggest is show the labels on hover...that should reduce the overlaps. – Cyril Cherian Nov 10 '15 at 04:54
  • Can you maybe show a running example? – kwoxer Nov 20 '15 at 08:30

2 Answers2

2

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.

kashesandr
  • 1,521
  • 28
  • 35
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

user2589273
  • 2,379
  • 20
  • 29