d3.js多折线图文字位置

Question

我绘制了一个d3多折线图作为附件，但图上的文本彼此重叠。

在数据接近时如何让紫色文本变成橙色文本？

   lines.selectAll('circle-group')
      .data(data.metricCategorys)
      .enter()
      .append('g')
      .style('fill', (d, i) => lineColor[i])
      .selectAll('circle')
      .data(d => d.data)
      .enter()
      .append('g')
      .attr('class', 'circle')
      .each((d, i, n) => {
        d3.select(n[i])
          .append('circle')
          .attr('cx', xScale(d.xAxisValue))
          .attr('cy', yScale(d.yAxisValue))
          .attr('r', circleRadius);
        d3.select(n[i])
          .append('text')
          .attr('class', 'text')
          .attr('text-anchor', 'middle')
          .text(`${d.yAxisValue}`)
          .attr('x', xScale(d.xAxisValue))
          .attr('y', yScale(d.yAxisValue) - 8)
          .attr('font-family', 'Arial')
          .attr('font-weight', '900')
          .attr('font-size', '14px');
      });
  }