D3.js，CSS3-旋转矩形以使其具有一条直线

Question

I'm using D3.js to create a arc and 4 rectangels. These Ractangles are dividing Donut into parts.

I want Ractangles to be aligned in straight line

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")

I'm using transform-origin, but not working.

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

Answer 1

transform-origin is a CSS property but you are rotating with an SVG attribute.

SVG rotate allows you to set the origin but for you situation it might just be easier to fix the translate:

.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+")";
});

Update fiddle here .