javascript - 饼图布局起始 Angular

Question

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

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

但这似乎是一个 hack。有没有正确的方法来做到这一点？文档说使用 startAngle

sets the overall start angle of the pie layout to the specified value in radians

所以我假设馅饼的其余部分会相应地绘制并与开始的位置相匹配......

Answer 1

如果将 startAngle 设置为静态值，则所有饼图切片都将相同，即它们都将从相同位置开始。对于您要尝试做的事情，您实际上不需要修改饼图布局的 Angular (因为这是首先计算它们的 Angular )，但是用于绘制圆弧生成器的 Angular 分割市场。

例如旋转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 here .