D3 Kreisdiagramm Etikett Daten funktionieren nicht

Question

Ich mache eine Kreisdiagramm-Komponente in angular2 mit d3, und ich habe festhängen, wenn Sie versuchen, Text zum Diagramm hinzuzufügen. Ich kann den Text im Element-Explorer in den Entwicklertools sehen, aber er wird nicht auf dem Diagramm angezeigt. Ich habe das Gefühl, dass es wahrscheinlich etwas albernes gibt, aber ich kann nicht herausfinden, was es sein könnte. Mein Code ist unten.

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

Vielen Dank für jede Hilfe im Voraus.

Answer 1

Arbeitete, was falsch war mit diesem. Ich verwendete widthRatio und heightRatio, um das Seitenverhältnis des Diagramms bei der Größenanpassung zu steuern, aber das bedeutete, dass der Etikettentext die Koordinaten 3 und 4 erhielt, was dazu führte, dass er nicht angezeigt wurde. In meinem Fall habe ich den Code so geändert, dass die Breite und Höhe durch die Breite und Höhe des übergeordneten Containers bestimmt wird, der wiederum von einem Bootstrap-Raster gesteuert wird.

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