D3 环形菜单加文字标签

// 定义两条路径以使标签的方向正确
labelsVals.append('def')
  .append('path')
  .attr('id', 'label-path-1')
  .attr('d', `m0 ${-labelValRadius} a${labelValRadius} ${labelValRadius} 0 1,1 -0.01 0`);
labelsVals.append('def')
  .append('path')
  .attr('id', 'label-path-2')
  .attr('d', `m0 ${-labelValRadius1} a${labelValRadius1} ${labelValRadius1} 0 1,0 0.01 0`);

labelsVals.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .style('font-size', labelFontSize)
  .style('fill', 'black')
  .style('font-weight', "bold")
  .style('text-anchor', 'middle')
  .append('textPath')
  .attr('href', function (d, i) {
    const p = pieData[i];
    const angle = pieAngle[i];
    if (angle > 90 && angle <= 270) { // 根据角度选择路径
      return '#label-path-2';
    } else {
      return '#label-path-1';
    }
  })
  .attr('startOffset', function (d, i) {
    const p = pieData[i];
    const angle = pieAngle[i];
    let percent = (p.startAngle + p.endAngle) / 2 / 2 / Math.PI * 100;
    if (angle > 90 && angle <= 270) { // 分别计算每条路径的正确百分比
      return 100 - percent + "%";
    }
    return percent + "%";
  })
  .text("")
  .on('click', function (d) {
    if (d.type === 'link'){
        linkNode(currentD)
    }else if (d.type === 'showon'){
        showonNode(current, currentD)
    }else if (d.type === 'showoff'){
        showoffNode(currentD, highlightNodesId)
    }else if (d.type === 'highlight'){
        highlight(current, currentD)
    }
    d3.event.stopPropagation()
  }, true)