Question

我正在尝试在d3js分组条形图上放置标签，这应该很容易，但是我一直无法正确执行。我知道它一定类似于我添加rects的方法，但是不行。我尝试遵循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
...

分组条形图上的D3js标签

1 个答案: