Question

您好StackOverflow社区。我试图找到我遇到的问题的解决方案，但无法获得任何帮助。我能找到的最接近的是this似乎没有解决方案。我是D3.js的初学者，所以这也可能是我解决问题的原因。我试过挖掘文档也没有成功。所以这是我的问题。我试图做一些数据可视化的东西，偶然发现D3.js示例库中的this饼图，我觉得这很漂亮。一旦我开始将大量值放入图表中，我注意到我有重叠标签的问题，如下所示。我只更改了示例页面中的代码，以便创建多个图表。除此之外，它基本上是一样的。感谢任何人提供的任何帮助或信息！

Overlapping Labels

Answer 1

这仅适用于d3 v4。想法是将每个节点与其余节点进行比较，并在检测到冲突时移动其位置。以下代码段将this.texts用作标签的d3选择。一旦检测到碰撞，该元素将移至下方-可能无法针对特定情况进行优化。

const nodes = this.texts.nodes();
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      const previous = nodes[i];
      const elem = nodes[j];
      const thisbb = elem.getBoundingClientRect(),
        prevbb = previous.getBoundingClientRect();
      if (!(thisbb.right < prevbb.left ||
        thisbb.left > prevbb.right ||
        thisbb.bottom < prevbb.top ||
        thisbb.top > prevbb.bottom)) {
        const matrix = previous.transform.baseVal.consolidate().matrix;
        d3.select(elem).attr('transform', `translate(${matrix.e}, ${matrix.f + prevbb.bottom - prevbb.top})`);

      }
      const elemMatrix = elem.transform.baseVal.consolidate().matrix;
      pieData[j].pos = [elemMatrix.e, elemMatrix.f];
    }
  }

D3.js'Pie Charts Labels'重叠

1 个答案: