优化价值标签碰撞缓解算法

Question

我的d3.js图表​​有以下算法可以检测图表中的碰撞值标签。渲染所有标签后必须执行此操作，因此我使用d3.selectAll()。

的原因

现在，它的作用是，我选择div上的所有值标签。对于每个值标签，我得到它们的坐标以生成矩形角的两个x和y坐标点。更多信息可在此SO answer中找到。

然后我通过检查先前添加到valueLabelPositions数组的所有点来检查冲突。所以这个操作就像O(n^2)，这是非常慢的。我还检查了JS调用堆栈时间轴，对于具有4轴的图形，它需要超过2000毫秒。以下是标签上带有碰撞检测的图表示例：

这是我写的代码。

  removeOverlappingLabelText: ->
    valueLabelPositions = []
    d3.selectAll('.value-labels text')[0].forEach (t) ->
      currentBox = t.getBoundingClientRect()

      # Check this for deeper summary: https://stackoverflow.com/a/32088787/1913389
      #         _________________  x2, y2
      #        |                 |
      #        |                 |
      #        |                 |
      #        |                 |
      # x1, y1 |_________________|

      # Position of bottom-left coordinate of current rect
      x1 = currentBox.left
      y1 = currentBox.top

      # Position of top-right coordinate of current rect
      x2 = currentBox.right
      y2 = currentBox.bottom

      for i in valueLabelPositions
        # Second rect
        x3 = i.left
        y3 = i.top
        x4 = i.right
        y4 = i.bottom
        if(x3 > x2 || y3 > y2 || x1 > x4 || y1 > y4)
          # No overlaps
        else
          # Overlap found, so remove
          t.remove()

      valueLabelPositions.push(currentBox)

我很好奇我如何优化它，所以它比n^2更快？