如何解决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) + ")");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。