D3力导向图中文本标签重叠问题

Question

我很难在力图表上定位文本标签。它们重叠在一起，我无法弄清如何修复它。我尝试了许多在线解决方案，但没有一个有效。你能帮我看看吗？

这是我的文本标签代码：

    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});

这是当前的样子：非常感谢您的帮助！

- Ellie Zhu

---

这个问题应该会有所帮助：https://dev59.com/_GQm5IYBdhLWcg3wrAiY。 - Lars Kotthoff

我已经尝试过了，但在我的图表上无法工作。标签将离圆形太远。 - Ellie Zhu

@EllieZhu，这是在一个狭小的空间里有很多标签。除了将标签移开圆圈之外，还有哪些替代方案？ - Mark

其中一个选择是不同时显示标签。这样会更加简洁，但我仍然需要想办法移动它们。 - Ellie Zhu

我可以建议的一个选项是在悬停时显示标签...这应该可以减少重叠。 - Cyril Cherian

你能否展示一个运行的例子吗？ - kwoxer

Answer 1

我发现一个简单的解决方案是使用节点的 Voronoi 单元格中心作为标签的锚点。这将为您的图表提供最佳间距。

这个示例可以在以下链接中查看： https://bl.ocks.org/mbostock/6909318

- user2589273

Answer 2

试试这个http://bl.ocks.org/MoritzStefaner/1377729。 在这里，作者介绍了一种使用另一个力学布局将标签放置在节点附近的方法。

- kashesandr