Grafik genişliğini grafik çubuklarının üstünde ortalamak için metin genişliği nasıl doğru şekilde alınır?

Question

Şu anda her çubuğun üstünde görünen ilişkili bar değerlerine sahip bir grafik var, ancak her bir metin öğesinin genişliğini getirememem nedeniyle, değer etiketlerini ortalamakta güçlük çekiyorum. Benim grafik anda çizim nasıl

budur:

yapmam gereken tek şey her metin eleman genişliğinin yarısı çıkarmak, ama birlikte bunu gibi olamaz CoffeeScript aşağıdadır:

#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)) 

Ben dengelemek için bir değer ayarlamak için her metin elementin genişlik özelliğini erişebileceği bir yolu var mı?

Answer 1

Metnin sınırlayıcı kutusunu alabilir ve ortalamak için dönüştürmeyi uygulamak için bu değerleri kullanabilirsiniz. Sınırlama kutusunu elde etmek için bir örnek here'dur. Kod

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

Answer 2

bir belki daha basit bir yolu çubuğunun sol tarafına x set ile middle bir text-anchor kullanmaktır artı çubuğun yarısı genişliği gibi görünecektir:

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)