Question

我使用D3.js创建一个弧和4个rectangels。这些Ractangle将甜甜圈分成几部分。

我希望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。

D3.js，CSS3 - 旋转矩形直线

1 个答案: