饼图布局起始角度

Pie layout start angle

本文关键字：布局      更新时间：2024-05-23

我正在尝试对D3中的饼图布局使用startAngle，以确保饼图的第一个切片始终从90度开始绘制：

var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.amount; })
.startAngle(90 * (Math.PI/180));

这是有效的，但我发现馅饼现在还差90度：

http://jsfiddle.net/qkHK6/105/

我唯一能解决这个问题的方法是强制结束位置，如下所示：

.endAngle(450 * (Math.PI/180))

但这似乎是一个黑客。有正确的方法吗？文档中说，使用startAngle

将饼图布局的总体起始角度设置为指定值弧度

所以我认为剩下的馅饼会相应地画出来，并与它的起点相匹配。。。

如果将startAngle设置为静态值，则所有饼图切片的值都将相同，即它们都将从同一位置开始。对于你想要做的事情，你实际上不需要修改饼图布局的角度（因为这是首先计算它们的方法），而是需要修改用于绘制线段的圆弧生成器的角度。

例如，要旋转90度，请执行

var arc = d3.svg.arc().outerRadius(r)
            .startAngle(function(d) { return d.startAngle + Math.PI/2; })
            .endAngle(function(d) { return d.endAngle + Math.PI/2; });

在这里完成jsfiddle。

饼图短90度的原因是饼图布局的默认endAngle是2π，这也解释了为什么你提到的"破解"有效（将角度添加到endAngle，使endAngle startAngle=2π）。

@Lars描述的解决方案（更改d3.svg.arc()的设置）在大多数情况下应该足够了。但是，如果饼图上有更多的元素，例如，带有多边形线的标签，则必须更改d3.layout.pie()而不是d3.svg.arc()的设置，因为标签线依赖于d3.layout.pie()计算的d.startAngle和d.endAngle。

相关文章：