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。