CSS3 - Transform-origin 不适用于 d3.js 中的 SVG 元素

Question

我有 SVG 矩形元素，我想用它来将甜甜圈分成几部分。

但是这些矩形（辐条）没有在一条直线上对齐。

我用的是D3.js，如果有更好的轮辐效果，请指教

rect = wheel.selectAll("g.rect")
  .data(rectData).enter()
  .append("g")
  .attr("transform",function(d,i){
     var rotate = 60*i;
     var rotX = 100, rotY = 150;
     return "translate("+rotX+","+rotY+") rotate("+rotate+")"
  })
  .attr("class","rect");

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
}, {
  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 = 60 * i;
    var rotX = 100,
      rotY = 150;
    return "translate(" + rotX + "," + rotY + ") rotate(" + rotate + ")"
  })
  .attr("class", "rect");


rect.append("rect")
  .attr("width", 20)
  .attr("height", outerRadius + 10)

wheel.append("path").attr("d", arc)
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .attr("class", "donut")

#wheel {
  margin: auto 0;
  width: 300px;
  height: 300px
}
#wheel .donut {
  fill: #F37E36;
}
#wheel rect {
  fill: #A2A931;
  transform-origin: 90 50;
}
#wheel .rect rect {
  transform-origin: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<div id="wheel"></div>

Answer 1

下面是这种设计的一个简单示例（仅使用 javascript 来计算角度）。

简化标记后，您将能够轻松地向 'spokes' 添加效果。

var len = $('.outer').children().length; //gives 4
var angle = 360 / len;
var newAngle = angle;
$('.outer').children().each(function() {
  $(this).css("transform", "rotate(" + newAngle + "deg)");
  newAngle = angle + newAngle;
});

.outer {
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 20px solid tomato;
  border-radius: 50%;
  position: relative;
  z-index: 8;
  transition: all 4s;
}
.spoke {
  position: absolute;
  transform-origin: left center;
  height: 20px;
  width: 50%;
  background: #A2A931;
  left: 50%;
  top: calc(50% - 10px);
  text-align: center;
  z-index: 2;
}
.outer:hover {
  transform: rotate(360deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="spoke">spoke 1</div>
  <div class="spoke">spoke 2</div>
  <div class="spoke">spoke 3</div>
  <div class="spoke">spoke 4</div>
  <div class="spoke">spoke 5</div>
  <div class="spoke">spoke 6</div>
  <div class="spoke">spoke 7</div>
</div>

CSS3 - Transform-origin 不适用于 d3.js 中的 SVG 元素

CSS3 - Transform-origin not working on SVG element in d3.js

javascript

css

svg

d3.js