D3円グラフのラベルデータが機能しない

Question

私はangular3でd3を使って円グラフコンポーネントを作成しています。グラフにテキストを追加しようとすると固まってしまいます。デベロッパーツールの要素エクスプローラー内にテキストが表示されますが、グラフには表示されません。私は、おそらく、私がやっていることは本当にばかげているが、何ができるのか理解できないと感じている。私のコードは以下の通りです。

showChart() { 
    let widthRatio = 4; 
    let heightRatio = 3; 
    let radius = Math.min(widthRatio, heightRatio)/2; 

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

    let svg = d3.select('#' + this.chartId) 
     .append('svg') 
     .attr('width', '100%') 
     .attr('height', '100%') 
     .attr('viewBox', '0 0 ' + widthRatio + ' ' + heightRatio) 
     .append('g') 
     .attr('transform', 'translate(' + (widthRatio/2) + ',' + (heightRatio/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(this.chartData)) 
     .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'; }); 
} 

ご協力いただきありがとうございます。

Answer 1

これには何が問題になっていたかを試しました。 widthRatioとheightRatioを使用して、サイズ変更時のグラフの縦横比を制御していましたが、ラベルテキストが3と4の座標を取得していたため、表示されませんでした。私の場合、これを修正するために、幅と高さを親コンテナの幅と高さで設定し、ブートストラップグリッドによって制御されるようにコードを変更しました。

let width = parseInt(d3.select('#' + this.parentContainerId).style('width')); 
let height = parseInt(d3.select('#' + this.parentContainerId).style('height'));