// 定义两条路径以使标签的方向正确 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)
标签:style,菜单,angle,attr,标签,text,path,D3,append From: https://www.cnblogs.com/carriexu/p/17124072.html