CODEWITHSUNDEEP
javascriptjqueryd3.js
P_R
P_R

Reputation: 488

D3 libary pie chart, set the start angle of the first slice

I wrote this sample code to drawing a pie chart with the D3 library. By a value passing in a data array. When the pie appear on the screen I noticed that the first slice doesn't have a startAngle equals to 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>

There is a way to set the start angle of the first slice? Thanks

Upvotes: 1

Views: 3035

Answers (1)

musically_ut
musically_ut

Reputation: 34288

You can use pie.startAngle of the pie layout to set the start angle..

In your code:

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

Upvotes: 2

Related Questions