d3.js - D3 缩放时显示节点的文本

Question

我的 d3 图中的节点数太大。所以我在那个图中建立了一个缩放机制。现在的问题是，我不能为每个节点显示文本，因为它们会相互重叠。但是，当我放大节点时，空间足以显示文本。

那么，当空间足以显示所有文本而不重叠时，如何显示文本？

Answer 1

我过去也遇到过同样的问题。不幸的是，最佳标签放置不是一个简单的问题。为了减轻重叠效应，一种选择是使用受限制的力布局来放置标签。您还可以尝试使用标注让标签远离节点。

在过去，我实现了一种基于贪婪碰撞检测的算法，类似于：

sort the labels in decreasing priority
for each label in the list // so most important first
    if the label does not overlap any placed labels
        place the label and add it to my collision data structure (e.g. quad tree)
    else
        hide the label

显然，这会有一些非最佳情况，如果你有很多动画，它可能会很慢。但是，当您可以选择放大以查看更多标签时，并且如果您的标签绝对数量不是太高，那么它会很好地工作。还有许多明显的方法可以加速它，比如将测试限制在视图中的标签上（但是你需要在 pan 上更新）。

您可以在这里找到一些有用的建议，包括碰撞检测的实现。