分组条形图上的 D3js 标签

Question

我正在尝试在我的 d3js 分组条形图上添加标签，这应该很容易，但我无法正确完成。我知道它必须与我添加矩形的方式类似，但不是。我尝试关注this example，但它没有用。

这就是我添加矩形的方式：

var rectG = pp.selectAll('rect')
  .data(dataFilter);

rectG.exit().remove();

var  rectGEnter= rectG.enter().append("g")
    .append("g")
      .attr("transform", function(d) {return "translate(" + x(d.group) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { return subgroups.map(function(key) {return {key: key, value: d[key]}; }); })
    .enter().append("rect")
       .attr("x", function(d) { return xSubgroup(d.key); })
       .attr("y", function(d) { return y(d.value? d.value : 0); })
       .attr("width", xSubgroup.bandwidth())
       .attr("height", function(d) { return height - y(d.value? d.value : 0); })
       .attr("fill", function(d) { return getColor(d.key); })

所以我尝试对标签做同样的事情，但没有奏效，除了这个：

rectGEnter= rectG.enter().append("g")
  .append("g")
    .attr("transform", function(d) {return "translate(" + x(d.group) + ",0)"; })
  .selectAll("text")
  .data(function(d) { return subgroups.map(function(key) {return {key: key, value: d[key]}; }); })
  .enter().append("text")
     .attr("x", function(d) { return xSubgroup(d.key)+1; })
     .attr("y", function(d) { return y(d.value? d.value : 0); })
     .attr("text-anchor", "start")
     .style("alignment-baseline", "middle")
     .text(function(d) { return (d.value? d.value : 0); });

  }

如果第一次没问题，但如果我更新我的数据标签不能很好地更新，我有一个例子here，任何帮助都会很感激

Answer 1

如果我理解正确，您只想删除旧标签。我在你的笨蛋身上试过了。以下代码行可以解决问题。

 function updates(selectedGroup) {
    pp.selectAll("rect").remove();
    pp.selectAll("text").remove(); // <-- remove the old text elements
...

编辑：

为了防止标签被删除，我们可以简单地添加一个类来指定我们要删除的文本。

rectGEnter= rectG.enter().append("g")
      .append("g")
        .attr("transform", function(d) {return "translate(" + x(d.group) + ",0)"; })
      .selectAll("text")
      .data(function(d) { return subgroups.map(function(key) {return {key: key, value: d[key]}; }); })
      .enter().append("text")
        .attr('class', 'valueLabels') // <-- Here we add a class
         .attr("x", function(d) { return xSubgroup(d.key)+1; })
         .attr("y", function(d) { return y(d.value? d.value : 0); })
         .attr("text-anchor", "start")
         .style("alignment-baseline", "middle")
         .text(function(d) { return (d.value? d.value : 0); });

现在我们可以在移除元素时指定类。

 function updates(selectedGroup) {
    pp.selectAll("rect").remove();
    pp.selectAll('g').selectAll('g').selectAll("text.valueLabels").remove(); // <-- remove the old text elements
...