获取饼图标签以在D3.js中正确对齐或不重叠？

Question

我有一个饼图，刚刚在其中添加了一个新部分，不幸的是它与周围的标签重叠。这是问题的屏幕截图：

我拥有所有code on pastebin，但是我认为这可能是解决问题的函数：

function showDetails (layer, data) {
active.inner = !active.inner
active.outer = false
let lines = guideContainer.selectAll('polyline.guide-line-inner')
  .data(pie(data.inner))
let text = guideContainer.selectAll('.inner-text')
  .data(pie(data.inner))

if (active.inner) {
  // LINES
  lines.enter()
    .append('polyline')
    .attr('points', calcPoints)
    .attr('class', 'guide-line-inner')
    .style('opacity', 0)
    .transition().duration(300)
    .style('opacity', d => { return d.data.value <= 0 ? 0 : 1 })

  lines.attr('points', calcPoints).attr('class', 'guide-line-inner')

  // TEXT
  text.enter()
    .append('text')
    .html(labelText)
    .attr('class', 'inner-text label label-circle')
    .attr('transform', labelTransform)
    .attr('dy', '1.1em')
    .attr('x', d => { return (midAngle(d) < Math.PI ? 15 : -15) })
    .style('text-anchor', d => { return (midAngle(d)) < Math.PI ? 'start' : 'end' })
    .style('opacity', 0)
    .call(wrap, 300)
    .on('click', d => { vm.$emit('details', d) })
    .transition().duration(300)
    .style('opacity', d => { return d.data.value <= 0 ? 0 : 1 })
} else {
  lines.transition().duration(300)
    .style('opacity', 0)
    .remove()
  text.transition().duration(300)
    .style('opacity', 0)
    .remove()
}
guideContainer.selectAll('polyline.guide-line-outer').transition().duration(300)
  .style('opacity', 0)
  .remove()
guideContainer.selectAll('.outer-text').transition().duration(300)
  .style('opacity', 0)
  .remove()
}

非常感谢您的帮助！