Pie kąt początkowy układ

Question

Próbuję użyć startAngle dla układu kołowego w D3, aby zapewnić, że pierwszy kawałek tortu jest zawsze rysowane rozpoczynając 90 stopni:

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

To działa, ale jestem uznając, że pie teraz kończy 90 stopni skrócie:

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

Jedyny sposób mogę dowiedzieć się naprawić to, aby zmusić pozycję końcową tak:

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

Ale to wygląda na włamanie. Czy jest to właściwy sposób? Dokumentacja mówi, że za pomocą startAngle

ustanawia ogólną kąt początkowy układu kołowego do podanej wartości w radianach

Więc którą zakłada się, że reszta tortu będzie odpowiednio rysować i Dopasuj się do miejsca, w którym się zaczął ...

Answer 1

Jeśli ustawisz startAngle na wartość statyczną, będzie ona taka sama dla wszystkich wycinków, tzn. wszystkie rozpoczną się w tej samej pozycji. Do tego, co próbujesz zrobić, nie musisz modyfikować kątów układu wykresu kołowego (ponieważ to właśnie one są obliczane), ale kąty generatora łuku, który jest używany do rysowania segmenty.

Aby obrócić o 90 stopni na przykład zrobić

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

Kompletna jsfiddle here.

Answer 2

Powodem, dla którego ciasto jest krótsze o 90 stopni, jest to, że domyślna funkcja endAngle dla układu kołowego to 2π, co tłumaczy również, dlaczego wspomniany "hack" działa (dodaj kąt do endAngle, aby endAngle-startAngle = 2π) .

Rozwiązanie opisane przez @Lars (zmiana ustawień d3.svg.arc()) powinno wystarczyć w większości przypadków. Ale jeśli na wykresie kołowym jest więcej elementów, na przykład labels with polygon lines, musisz zmienić ustawienia d3.layout.pie() zamiast d3.svg.arc(), ponieważ linie etykiet zależą od d.startAngle i , obliczonej przez d3.layout.pie().