[英]D3.js - Rotate svg text around a point
How can I rotate text with rectangle inside a Donut chart, I've tried by passing text
selector in d3.timer
but this changes text
current state. 我如何在Doughnut图表内旋转带有矩形的文本,我尝试通过在d3.timer
传递text
选择器来进行d3.timer
但这会更改text
当前状态。
text
will be always inside rectangle. text
将始终位于矩形内。
var start = Date.now()
d3.timer(function() {
var angle = (Date.now() - start) * .3,
rotate = function(d,i) {
return "rotate(" + angle / 80 + ")";
};
wheel.selectAll("rect").attr("transform", rotate);
});
Apply the rotation to the <g>
group which contains the text and rect. 将旋转应用于包含文本和矩形的<g>
组。 Note that you will have add the rotate transformation to the existing transformation matrix. 请注意,您将把旋转转换添加到现有转换矩阵中。
d3.timer(function() {
rect.each(function(){
var newTransform = this.getCTM().rotate(2), //Try with adding a fixed angle of rotation
svgMatrix = this.ownerSVGElement.createSVGTransformFromMatrix(newTransform);
this.transform.baseVal.initialize(svgMatrix);
});
});
Here is the updated jsFiddle . 这是更新的jsFiddle 。 Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.