Почему это похоже на ломтики моей Diy Svg-Path Pie Chart, не сходитесь в центре? ⇐ Html

[Anonymous]

Я попытался создать динамическую круговую диаграмму с угловым и элементом пути SVG. Эффект ухудшается, когда кто-то выбирает большую ширину инсульта , но даже без ширины инсульта все еще заметно.
Почему это случай и как я могу его решить?

Код: Выделить всё

import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

@Component({
selector: 'app-root',
template: `



@for( p of paths; track $index ){

}



`,
})
export class Playground {
paths : string[] = [];
colors : string[] = [];

constructor(){
const d = 4; // decimal places
const angles = [0, 1, 2, 2.4, 4, 5, 2*Math.PI];
const n = angles.length;
const r = 25;
for( let i = 0; i < n-1; ++i ){
this.colors.push(this.getRandomColor())
const a0 = angles[i];
const a1 = angles[i+1];
const dA = (a1 - a0)/Math.PI * 180;

const x0 = r * Math.cos(a0);
const y0 = -r * Math.sin(a0);
const x1 = r * Math.cos(a1);
const y1 = -r * Math.sin(a1);

const largeAngle = dA < 180 ? 0 : 1;

const path = `
M 0 0
L ${x0.toFixed(d)} ${y0.toFixed(d)}
A ${r.toFixed(d)} ${r.toFixed(d)} -${dA.toFixed(d)} ${largeAngle} 0 ${x1.toFixed(4)} ${y1.toFixed(4)}
L 0 0 z`;

console.log(path);

this.paths.push(path);
}
}

private getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

}

bootstrapApplication(Playground);

Подробнее здесь: https://stackoverflow.com/questions/797 ... onverge-in