D3.js，CSS3 - 旋轉矩形在一條直線上

Question

我使用D3.js創建一個弧和4個直線段。這些矩形將甜甜圈分成幾部分。

我想

var width=200,height=300,innerRadius =100, outerRadius=80; 
var wheel = d3.select("#wheel") 
.append("svg").attr("width",width).attr("height",height) 

arc = d3.svg.arc() 
    .innerRadius(innerRadius).outerRadius(outerRadius) 
    .startAngle(0).endAngle(2*Math.PI) 

rectData = [ 
    {x:width/2,y:height/2}, 
    {x:width/2,y:height/2}, 
    {x:width/2,y:height/2}, 
    {x:width/2,y:height/2}, 
] 
rect = wheel.selectAll("g.rect") 
    .data(rectData).enter() 
    .append("g") 
.attr("transform",function(d,i){ 
    var rotate = 90*i; 
    return "translate(100,150) rotate("+rotate+")" 
}).attr("class","rect") 

rect.append("rect") 
    .attr("width",20).attr("height",outerRadius) 

wheel.append("path").attr("d",arc) 
    .attr("transform","translate("+width/2+","+height/2+")") 
    .attr("class","donut") 

我使用變換出身，但沒有工作Ractangles以直線排列。

http://jsfiddle.net/kmdr72wc/4/

Answer 1

transform-origin是一個CSS屬性，但您正在使用SVG屬性旋轉。

SVG rotate允許您設置origin但對你的情況可能是更容易修復翻譯：

.attr("transform",function(d,i){ 
    var rotate = 90*i; 
    var rotX = 100, rotY = 150; 
    if (i === 0){ 
    rotX -= 10; 
    } else if (i === 1){ 
    rotY -= 10; 
    } else if (i === 2){ 
    rotX += 10; 
    } else if (i === 3){ 
    rotY += 10; 
    } 
    return "translate("+rotX+","+rotY+") rotate("+rotate+")"; 
}); 

更新小提琴here。