Javascript D3库饼图，设置第一个切片的起始角度_Javascript_Jquery_D3.js

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

javascript jquery d3.js

Javascript D3库饼图，设置第一个切片的起始角度,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我编写了这个示例代码来使用D3库绘制饼图。通过在数据数组中传递的值。当馅饼出现在屏幕上时，我注意到第一个切片没有等于0的startAngle <html> <head> <script src="d3.min.js"></script> </head> <body> <script> var width = 960, height = 500,

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

<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>


可变宽度=960，
高度=500，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
数据=
[
{“标签”：“a”，“值”：“1”}，
{“标签”：“b”，“值”：“6”}，
{“label”：“c”，“value”：“7”}，
{“标签”：“d”，“值”：“5”}，
{“标签”：“e”，“值”：“4”}，
{“标签”：“f”，“值”：“3”}，
{“标签”：“g”，“值”：“2”}，
];      
var svg=d3.选择（“主体”）
.append（“svg”）
.数据（[数据]）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var arc=d3.svg.arc（）
.外层（半径-10）
.内半径（0）；
var pie=d3.layout.pie（）
.sort（函数（d）{返回d.value；}）
.value（函数（d）{返回d.value；}）；
var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，弧）
.style（“fill”，函数（d）{返回颜色（d.data.label）；}）；
g、 附加（“文本”）
.attr（“变换”，函数（d）{return“translate”（+arc.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{return d.data.label；}）；

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

您可以使用

在代码中：

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

var pie=d3.layout.pie（）
.startAngle（Math.PI/4）//谢谢，我试过了，但在这种情况下，a丢了一块馅饼。还有一个问题：0点不在0度，对吗？因为在我的例子中，a切片不是从0@P_R文档说明默认值为0。你能创建一个有问题的JSFIDLE吗？@P\R“a”片段确实从0开始。无论如何，问题是需要设置endAngle
。我已经确定了答案，这里有一把小提琴：