D3 强制布局文本标签重叠答案

【问题标题】：D3 force layout text label overlappingD3 强制布局文本标签重叠
【发布时间】：2015-11-09 18:32:09
【问题描述】：

我很难在力图上放置文本标签。它们相互重叠，我不知道如何解决它。而且我从网上尝试了许多解决方案，但没有一个效果很好。你能帮我看看吗？

这是我的文本标签的代码：

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

这是它现在的样子：

非常感谢您的帮助！

【问题讨论】：

This question 应该会有所帮助。
我试过了。它不适用于我的图表。标签将离圆圈太远。
@EllieZhu，在狭小的空间里有很多标签。除了将标签从圆圈中移开之外，还有哪些选择？
其中一种选择不会同时显示标签。它会不那么拥挤，但我仍然需要弄清楚如何移动它们。
我可以建议的选项是在悬停时显示标签...这应该可以减少重叠。

标签： d3.js force-layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

这方面的一个例子见于： https://bl.ocks.org/mbostock/6909318

【讨论】：