Çaprazfiltre çubuklarındaki metin etiketleri görünmüyor

Question

this solution ile uyumlu bir Çapraz Filtre frekans çubuk grafiğinin sütunlarına değer etiketleri eklemeye çalışıyorum, ancak işe yaramayacağım. Veriler doğru bir şekilde geçiyor gibi görünüyor; DOM'de görünür, ancak görünmez. Her ipucu için minnettar.

Burada my working jsfiddle.

HTML

<span> 
    <div id="petchart"></div> 
</span> 

JS

j = [{'pet': 'Felis catus'}, {'pet': 'Canis lupus familiaris'}, {'pet': 'none'}, 
     {'pet': 'Felis catus'}, {'pet': 'Melopsittacus undulatus'}, 
    {'pet': 'Canis lupus familiaris'}, {'pet': 'Canis lupus familiaris'}]; 

cf = crossfilter(j); 
pets_chart = dc.barChart("#petchart"); 
petDimension = cf.dimension(function(d) {return d.pet;}); 
petCountGroup = petDimension.group(); 

pets_chart 
    .dimension(petDimension) 
    .group(petCountGroup) 
    .x(d3.scale.ordinal().domain(["Felis catus","Canis lupus familiaris","Melopsittacus undulatus","none"])) 
    .xUnits(dc.units.ordinal) 

    pets_chart.on("renderlet", function(d){ 
    pets_chart.selectAll("rect") 
     //.selectAll("text").remove() 
     .append("g").attr('class', 'selection_total') 
     .append("text") 
     .data(petCountGroup.all()) 
     .attr("text", function(d) { console.log(d); return d.value; }) 
    }) 

    .width(300).height(250) 
    .colors(['#1f77b4']).colorAccessor(function(d, i){ return i; }) 
    .xAxis().ticks(2); 

dc.renderAll(); 

CSS

g.selection_total text{ 
    font-size: 1em; 
    fill: black; 
} 

Answer 1

burada

Güncelleme keman: https://jsfiddle.net/p1j10mgx/7/

Eski kodunuzdaki temel sorun, <rect> s içinde <text> nesnesini koymaktır, ki bu mümkün değildir. Bunun yerine, daha yüksek bir g bloğu altında, ".chart-body" diyelim. Sonra ana hile koordinatları doğru almaktır. Ben bahsedilen çözeltisi (here) kullanılmış ve etiketlere data olarak <rect> nesne setini verdi koordinatları için

. Ardından, koordinatları doğrudan <rect> nesnesinden alırsınız ve ihtiyacınız olabilecek tüm ek bilgiler, nesnenin kendi .data() alanındadır.