D3库饼图，设置第一个切片的起始角度答案

【问题标题】：D3 libary pie chart, set the start angle of the first sliceD3库饼图，设置第一个切片的起始角度
【发布时间】：2015-12-03 15:09:11
【问题描述】：

我编写了这个示例代码来使用 D3 库绘制饼图。通过传入数据数组的值。当饼图出现在屏幕上时，我注意到第一个切片的 startAngle 不等于 0。

<html>
<head>
    <script src="d3.min.js"></script>
</head>
<body>
    <script>        
        var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;
        var color = d3.scale.ordinal()
            .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
        data = 
        [
            {"label": "a", "value": "1"},
            {"label": "b", "value": "6"},
            {"label": "c", "value": "7"},
            {"label": "d", "value": "5"},
            {"label": "e", "value": "4"},
            {"label": "f", "value": "3"},
            {"label": "g", "value": "2"},
        ];      
        var svg = d3.select("body")
            .append("svg")                  
            .data([data])                   
            .attr("width", width)           
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  
        var arc = d3.svg.arc()              
            .outerRadius(radius-10)                                         
            .innerRadius(0);                                                            
        var pie = d3.layout.pie()                                               
            .sort(function(d) { return d.value; })                          
            .value(function(d) { return d.value; });                            
        var g = svg.selectAll(".arc")                                       
                .data(pie(data))                                            
                    .enter().append("g")                                    
                        .attr("class", "arc");                              
          g.append("path")
              .attr("d", arc)                                           
              .style("fill", function(d) { return color(d.data.label); });  
          g.append("text")                                                  
              .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })      
              .attr("dy", ".35em")
              .style("text-anchor", "middle")
              .text(function(d) { return d.data.label; });            
    </script>
</body>
</html>

有没有办法设置第一个切片的起始角度？谢谢

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

您可以使用pie.startAngle of the pie layout to set the start angle.。

在您的代码中：

   var pie = d3.layout.pie()   
        .startAngle(Math.PI / 4) // <-- Setting startAngle of the layout
        .endAngle(Math.PI * 2 + Math.PI / 4) // <-- and endAngle
        .sort(function(d) { return d.value; })                          
        .value(function(d) { return d.value; });

【讨论】：

谢谢，我试过了，但在这种情况下丢失了一块馅饼。还有一个问题：0 点不在 0 度，对吗？因为在我的情况下，切片不是从 0 开始的
@P_R 文档说默认值是0。你能创建一个有问题的JSFiddle吗？
@P_R 'a' 切片确实从 0 开始。无论如何，问题是 endAngle 也需要设置。我已经确定了答案，这是一个有效的小提琴：jsfiddle.net/ap9bLofk/1