<svg #test width="300" height="300"></svg>

values: number[] = [100, 1000, 2500, 150];
@ViewChild('test') test;
ngOnChanges(changes) {
        this.renderPie(changes.values);
}
ngAfterViewInit() {
    this.renderPie(this.values);
}
renderPie(values: number[]) {
    let width = 300;
    let height = 300;
    let radius = Math.min(width, height) / 2;

    let color = d3.scaleOrdinal(d3.schemeCategory20b);

    let svg = d3.select(this.test)
        .append('svg')
        .attr('width', '100%')
        .attr('height', '100%')
        .attr('viewBox', '0 0 ' + width + ' ' + height)
        .append('g')
        .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');

    let arc = d3.arc()
        .innerRadius(0)
        .outerRadius(radius);

    let labelArc = d3.arc()
        .innerRadius(radius - 40)
        .outerRadius(radius - 40);

    let pie = d3.pie()
        .value((d) => { return d.count; })
        .sort(undefined);

    let g = svg.selectAll('.arc')
        .data(pie(values))
        .enter()
        .append('g')
        .attr('class', 'arc');

    g.append('path')
        .attr('d', arc)
        .style('fill', (d) => { return color(d.data.label); });

    g.append('text')
    .attr('transform', (d) => { return 'translate(' + labelArc.centroid(d) + ')'; })
    .attr('dy', '.35em')
    .text((d) => { return 'test'; });
    }