D3.js 交叉筛选栏上的文本标签不会出现

我试图在交叉滤波器频率条形图的条形图上添加值标签，但无法使其正常工作。数据似乎被正确地传递；它确实出现在DOM中，但不可见。谢谢你的提示

给你

HTML

CSS

更新小提琴这里：

以前的代码的主要问题是，它将

对象放在

中，这是不可行的。 相反，您需要将它们添加到更高的

g

块下，比如

“.chart body”

。然后主要的技巧是获得正确的坐标

对于坐标，我使用了您提到的解决方案（）并将

对象集作为

数据

提供给标签。然后直接从

对象本身获取坐标，您可能需要的所有其他信息都在对象自己的

.data（）

字段中。

此处更新了fiddle：

以前的代码的主要问题是，它将

对象放在

中，这是不可行的。 相反，您需要将它们添加到更高的

g

块下，比如

“.chart body”

。然后主要的技巧是获得正确的坐标

对于坐标，我使用了您提到的解决方案（）并将

对象集作为

数据

提供给标签。然后直接从

对象本身获取坐标，所有可能需要的附加信息都在对象自己的

.data（）

字段中

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

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();

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