横切滤条上的文本标签不会出现

Question

我尝试将值标签附加到Crossfilter频率条形图的条形符合this solution，但无法使其正常工作。数据似乎正在正确传递;它确实出现在DOM中，但不可见。感谢任何提示。

此处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;
}