问D3 libary饼图，设置第一个切片的开始角。
EN

Stack Overflow用户

提问于 2015-12-03 15:09:11

回答 1查看 2.7K关注 0票数 1

我编写了这个示例代码来用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>

有一种方法来设置第一片的起始角吗？谢谢

jquery

d3.js

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-03 15:13:39

您可以使用 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; });

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34069396

复制

相似问题

问D3 libary饼图，设置第一个切片的开始角。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3 libary饼图，设置第一个切片的开始角。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3 libary饼图，设置第一个切片的开始角。
EN