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文本

回答

相關問題