D3 V4 Kreisdiagramm Angular2 Typescript Pfad ist falsch

Question

Ich habe ein funktionierendes Angularjs D3v3 Kreisdiagramm und habe beschlossen, es nach Angular5 zu portieren und es auf D3 V4 zu aktualisieren. Ich bekomme die Daten, aber die Bögen sind im Grunde leer und ich kann nicht sagen warum.

Hier ist ein Ausschnitt aus meinem Code:

export class PieChartComponent implements AfterViewInit { 
@ViewChild("containerPieChart") element: ElementRef; 

private host: D3.Selection<any>; 
private svg: D3.Selection<any>; 
private width: number; 
private height: number; 
private radius: number; 
private htmlElement: HTMLElement; 
private pieData: IData[]; 

constructor(private dataService: DataService) { } 

ngAfterViewInit() { 
    this.htmlElement = this.element.nativeElement; 
    this.host = D3.select(this.htmlElement); 
    this.dataService.$data.subscribe(data => { 
     this.pieData = data; 
     this.buildPie(); 
    }); 
} 

private buildPie(): void { 
    this.width = 400; 
    this.height = 400; 
    this.radius = Math.min(this.width, this.height)/2; 
    this.host.html(""); 
    let innerRadius = this.radius - 50; 
    let outerRadius = this.radius - 10; 

    this.svg = this.host.append("svg") 
     .attr("viewBox", `0 0 ${this.width} ${this.height}`) 
     .data([this.pieData]) 
     .attr('width', this.width) 
     .attr('height', this.height) 
     .append("g") 
     .attr("transform", `translate(${this.width/2},${this.height/2})`); 

    let pie = D3.pie().value((function(d) { return d})(this.pieData)); 
    let path = D3.arc().outerRadius(this.radius - 10).innerRadius(0); 
    let label = D3.arc().outerRadius(this.radius - 40).innerRadius(this.radius - 40); 

    let values = this.pieData.map(data => data.CASES); 

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

    let pieColor = D3.scaleOrdinal(["Blue", "Teal", "Green", "Orange", "Purple", "Red", "Sienna"]); 

    arc.append('path') 
     .attr('d', path) 
     .attr('fill', function (d, i) { 
      return pieColor(i); 
     }); 

    arc.append("text") 
     .attr("transform", (datum: any) => { 
      datum.innerRadius = 0; 
      datum.outerRadius = this.radius; 
      return "translate(" + label.centroid(datum) + ")"; 
     }) 
     .text((datum, index) => this.pieData[index].CASES) 
     .style("text-anchor", "middle"); 
} 

Ich weiß, es ist etwas, was ich nicht sehe und jede mögliche Hilfe würde geschätzt. Voller Code ist hier: Pie Chart D3 V4

Answer 1

Ich denke, der Fehler ist, wenn Sie pie definieren.

, wenn ich das ändern:

let pie = D3.pie().value((function(d) { return d})(this.pieData)); 

Um dies:

let pie = D3.pie().value((function(d) { return d})); 

ich ein Kreisdiagramm zurück auf Ihrem plunkr