D3在缩放时显示节点的文本

时间:2013-08-26 05:06:09

标签: d3.js zoom overlap

我的d3图表中的节点数量太大。所以我在该图中构建了一个缩放机制。现在的问题是,我只是无法显示每个节点的文本,因为它们会相互重叠。但是,当我放大节点时,空间足以显示文本。

enter image description here

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

1 个答案:

答案 0 :(得分:1)

过去我遇到过同样的问题。不幸的是,最佳标签放置不是一个容易的问题为了减轻重叠效应,一种选择是使用restricted force layout for label placement。您还可以尝试使用标注来允许标签远离节点移动。

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

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

显然这会有一些非最佳情况,如果你有很多动画,它可能会很慢。但是,如果您可以选择放大以查看更多标签,并且标签的绝对数量不是太高,那么它的效果非常好。还有一些显而易见的方法可以加快速度,例如将测试仅限制在视图中的标签上(但是你需要在平底锅上更新)。

您可以找到一些有用的建议here,包括collision detection的实施。