D3.js D3饼图仅旋转圆弧
我的图表需要在油炸圈饼的中心有一个标签,单击时不应旋转 我可以将标签附加到同级“g”组中并旋转圆弧组吗? 我可以只转换圆弧而不是旋转整个SVG吗? 最简单的解决方案是什么D3.js D3饼图仅旋转圆弧,d3.js,D3.js,我的图表需要在油炸圈饼的中心有一个标签,单击时不应旋转 我可以将标签附加到同级“g”组中并旋转圆弧组吗? 我可以只转换圆弧而不是旋转整个SVG吗? 最简单的解决方案是什么 var svg = d3.select("#pieChart").append("svg") .attr("width", '100%') .attr("height", '100%') .attr('viewBox', '0 0 '
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) + ")");