1

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/

ravins
  • 139
  • 3
  • 9

1 Answers1

0

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.

Community
  • 1
  • 1
Mark
  • 106,305
  • 20
  • 172
  • 230
  • this solution works for if rotation is 90deg, but it seems not work or hard to adjust if rotation is 60deg or 30deg. [rotation is 60deg] http://jsfiddle.net/kmdr72wc/23/ – ravins Feb 08 '15 at 11:18
  • That's why I was thinking if `transform-origin` is charm for this – ravins Feb 08 '15 at 11:22
  • may be more complex if different rotations as there [fiddle](http://jsfiddle.net/kmdr72wc/26/) – ravins Feb 08 '15 at 11:40