Question

我写了这个示例代码来绘制带有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>

有一种方法可以设置第一个切片的起始角度吗？感谢

Answer 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; });

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

1 个答案: