CSS3-转换来源不适用于d3.js中的SVG元素

Question

我有SVG rect元素，我想将其用于将Donut分成多个部分。

但是这些矩形（辐条）未沿直线对齐。

我正在使用D3.js ，请建议是否有更好的方法来获得辐轮效果

在SVG元素上转换原点

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计算角度）。

在简化标记之后，您将可以轻松地将效果添加到“分支”中。

 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>