D3 V4円グラフAngular2 Typescriptパスが正しくありません

Question

Angularjs D3v3円グラフを使用しており、これをAngular5に移植してD3 V4に更新することにしました。私はデータを取得していますが、アークは基本的に空であり、私はその理由を伝えられません。ここで

は、私のコードの抜粋です：

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

私は見ていないですし、任意の助けをいただければ幸いです何かがあることがわかっています。 フルコードはこちらPie Chart D3 V4

Answer 1

pieを定義するときにエラーが発生していると思います。

私は、この変更されたとき：これに

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

：

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

を私は戻ってあなたのplunkr

上の円グラフを取得