D3餅圖標籤數據不能正常工作

Question

我正在使用d3在angular2中製作餅圖組件，並且在嘗試向圖表中添加文本時我陷入了困境。我可以在開發人員工具中的元素資源管理器中看到文本，但它沒有顯示在圖表上。我有一種感覺，他們可能真的很愚蠢，但我無法弄清楚它可能是什麼。我的代碼如下。

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'));