D3饼图仅旋转圆弧

问题描述

我的图表在甜甜圈的中心需要一个标签，该标签在单击时不应旋转。

https://codepen.io/scratchy303/pen/dyXMzrz

我可以将标签附加在同级的“ g”组合中并旋转圆弧组吗？ 我可以只平移弧线而不旋转整个SVG吗？ 最简单的解决方案是什么？

var svg = d3.select("#pieChart").append("svg")
  .attr("width",'100%')
  .attr("height",'100%')
  .attr('viewBox','0 0 ' + Math.min(width,height) + ' ' + Math.min(width,height))
  .attr('preserveAspectRatio','xMinYMin')
  .append("g")
  .attr("transform","translate(" + radius + "," + height / 2 + ")")
  .style("filter","url(#drop-shadow)");

svg.append("g")
  .append("text")
  .attr("text-anchor","middle")
    .text("Donut Name");

解决方法

我通过反向旋转文本找到了解决方案。我最大的障碍就是在D3中遍历我的SVG。

//start by selecting the parent "g"roup and then you can select the text
d3.select(i.parentNode).select(".donut-label")
    .transition()
    .duration(1000)
    .attr("transform","rotate(" + (-angle) + ")");