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

Answer 2

你的馅饼完成90度短的原因是饼图布局的默认endAngle是2π，这也解释了为什么你提到的'hack'正在工作（添加endAngle的角度以便endAngle-startAngle =2π）。

@Lars描述的解决方案（d3.svg.arc()的更改设置）应该足以满足大多数情况。但是，如果饼图上有更多元素，例如labels with polygon lines，那么您必须更改d3.layout.pie()而不是d3.svg.arc()的设置，因为标签行依赖于d.startAngle由d.endAngle计算的d3.layout.pie()。

饼图布局开始角度

2 个答案: