Javascript d3中过度激进的值标签冲突检测

我正在为d3图表中的值标签进行碰撞检测。这是我的碰撞检测算法：

  isOverlap: (firstRect, secondRect) ->

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

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

    # Position of bottom-left coordinate of second rect
    x3 = secondRect.left
    y3 = secondRect.top

    # Position of top-right coordinate of second rect
    x4 = secondRect.right
    y4 = secondRect.bottom

    # Basic collision detection algorithm comparing two coordinates of the first
    # rectangle to the two coordinates of the second rectangle
    # Check this for full explanation: http://stackoverflow.com/a/32088787/1913389
    #         _________________  x2, y2
    #        |                 |
    #        |                 |
    #        |                 |
    #        |                 |
    # x1, y1 |_________________|

    !(x3 > x2 || y3 > y2 || x1 > x4 || y1 > y4)

现在我有两个难题

Delimma#1： 一个图形在其值标签冲突检测中没有那么激进：

如您所见，过于接近的值标签重叠，因为在我的代码中，我删除了导致冲突的点，因此该节点与另一个节点之间不再进行比较。代码如下：

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

      for previousRect, indexOfRect in valueLabelPositions
        isRemoved = false
        if @isOverlap(currentRect, previousRect)
          t.remove()
          isRemoved = true
          valueLabelPositions.splice(indexOfRect, 1)
          break

      if !isRemoved
        valueLabelPositions.push(currentRect)

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

      for previousRect, indexOfRect in valueLabelPositions
        isRemoved = false
        if @isOverlap(currentRect, previousRect)
          t.remove()
          isRemoved = true
          valueLabelPositions.splice(indexOfRect, 1)
          break

      valueLabelPositions.push(currentRect)

困境2 第二个图形过于激进，因为它比较了不应该再次比较的不存在的点，并且隐藏了太多：

代码如下：

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

      for previousRect, indexOfRect in valueLabelPositions
        isRemoved = false
        if @isOverlap(currentRect, previousRect)
          t.remove()
          isRemoved = true
          valueLabelPositions.splice(indexOfRect, 1)
          break

      if !isRemoved
        valueLabelPositions.push(currentRect)

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

      for previousRect, indexOfRect in valueLabelPositions
        isRemoved = false
        if @isOverlap(currentRect, previousRect)
          t.remove()
          isRemoved = true
          valueLabelPositions.splice(indexOfRect, 1)
          break

      valueLabelPositions.push(currentRect)

对于进退两难的问题#1，出现这个问题是因为如果它与前面的矩形重叠，我们不添加

currentRect

。因此，如果下一个

currentRect

与上一个

currentRect

冲突，它将无法知道

进退两难的问题是#2，我们将所有矩形添加到数组中，即使矩形没有与可见矩形冲突。因此，代码解释为存在与不可见矩形的冲突

我真的不知道该怎么办，希望能得到一些帮助-谢谢