Come ottenere correttamente la larghezza del testo per centrare le etichette sopra le barre del grafico?

Question

Attualmente ho un grafico che ha valori di barra associati visualizzati sopra ogni barra, ma ho difficoltà a centrare le etichette dei valori, a causa del fatto che non riesco a recuperare la larghezza di ogni elemento di testo.

Ecco come il mio grafico sta disegnando in questo momento:

Tutto quello che devi fare è sottrarre la metà della larghezza di ciascun elemento di testo, ma io non riesco a farlo con la segue CoffeeScript:

#Drawing value labels 
    svg.selectAll("rect") 
     .data(data) 
     .enter() 
     .append("text") 
     .text((d)-> d.Total) 
     .attr("width", x.rangeBand()) 
     .attr("x", (d)-> 
      textWidth = d3.selectAll("text").attr("width") 

      x(d.Year) + (x.rangeBand()/2) - (textWidth/2) 
     ) 
     .attr("y", (d)-> y(d.Total) - 5) 
     .attr("font-size", "10px") 
     .attr("font-family", "sans-serif") 

    #Drawing bars  
    svg.selectAll("rect") 
     .data(data) 
     .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", (d)-> x(d.Year)) 
     .attr("width", x.rangeBand()) 
     .attr("y", (d)-> y(d.Total)) 
     .attr("height", (d)-> height - y(d.Total)) 

c'è un modo che io possa accedere attributo width di ogni elemento di testo per impostare un valore per compensare?

Answer 1

È possibile ottenere il riquadro di delimitazione del testo e utilizzare tali valori per applicare una trasformazione per centrarlo. Un esempio per ottenere il riquadro di delimitazione è here. Il codice dovrebbe essere simile a

.text(function(d) { return d.Total; }) 
.attr("x", function(d) { 
    return x(d.Year) + (x.rangeBand()/2) - (this.getBBox().width/2); 
} 
... 

Answer 2

Un modo forse più semplice è quello di utilizzare un text-anchor di middle con x insieme al lato sinistro della barra più la metà della larghezza della barra:

svg.selectAll(".bar-label") 
    .data(data) 
.enter().append("text") 
    .text((d)-> d.Total) 
    .attr("class", "bar-label") 
    .attr("text-anchor", "middle") 
    .attr("x", (d)-> x(d.Year) + x.rangeBand()/2) 
    .attr("y", (d)-> y(d.Total) - 5)