D3.js,CSS3 - 将矩形旋转成一条直线

Question

我正在使用D3.js 创建一个圆弧和 4 个矩形。这些 Ractangles 正在将 Donut 分成几部分。

我希望 Ractangles 排列成直线

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

我正在使用 transform-origin，但无法正常工作。

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。