饼图布局开始角度

Question

我正在尝试将startAngle用于D3中的饼图布局,以确保饼图的第一个切片始终从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

将饼图布局的整体起始角度设置为以弧度为单位的指定值

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

Answer 1

如果设置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 .

Answer 2

馅饼完成90度短弯的原因是，馅饼布局的默认endAngle为2 ？，这也解释了为什么您提到的“ hack”有效（将角度添加到endAngle以便endAngle-startAngle = 2？）。

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