餡餅佈局起始角度

我試圖使用由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/

我可以計算來解決這個很給力，像這樣的結束位置的唯一方法3210

但是，這似乎是一個黑客。有沒有一個正確的方法來做到這一點？該文件說，使用由startAngle

設置弧度餡餅佈局的全面啓動角到指定值

所以我會假設餡餅的其餘部分將相應地繪製和匹配它開始的位置...

來源

2013-12-10 Mike Rifgin

如果將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。

來源

2013-12-10 09:14:21

你的餡餅完成90度短的原因是餡餅佈局的默認endAngle是2π，這也解釋了爲什麼你提到的'hack'正在工作（爲endAngle添加角度以便endAngle-startAngle =2π）。

@Lars描述的解決方案（更改設置爲d3.svg.arc()）應該足以滿足大多數情況。但是，如果餅圖上有更多元素，例如labels with polygon lines，則必須更改d3.layout.pie()而非d3.svg.arc()的設置，因爲標籤行依賴於由d3.layout.pie()計算的d.startAngle和d.endAngle。

來源

2015-11-26 06:17:17 fengshuo

餡餅佈局起始角度

回答

相關問題