CSS3 - 转换起源不工作在d3.js中的SVG元素

Question

我已经SVG rect元素，我想用它来将Donut分成几部分。

但是这些矩形（辐条）不是直线对齐的。

我使用D3.js，请建议，如果有更好的办法有辐轮效应

Transform Origin on SVG element

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>