D3.js - 围绕一个点旋转svg文本

如何在圆环图内旋转带矩形的文本，我试过通过text选择器d3.timer，但是这改变了text当前状态。D3.js - 围绕一个点旋转svg文本

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); 
});

这里是fiddle

来源

2015-02-09 ravins

您需要第二个文本选择器。例如：wheel.selectAll（“text”）。attr（“transform”，rotate）;或者您需要将所有内容放在一个组中。 – 2015-02-09 04:12:15

@Incodeveritas我试过这个，但不工作 – ravins 2015-02-09 04:54:38

文本选择绝对有效..文本只需要再次分开。 – 2015-02-09 04:55:29

应用旋转到包含文本和矩形的<g>组。请注意，您将有旋转变换添加到现有的变换矩阵。

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); 
    });  
});

这里是更新的jsFiddle。希望这可以帮助。

来源

2015-02-09 05:14:10 Gilsha

这给了一些希望，但不是连续轮换http://jsfiddle.net/kmdr72wc/54/ – ravins 2015-02-09 05:23:28

D3.js - 围绕一个点旋转svg文本

回答

相关问题