如何在d3中用附带的文本更新条形图？

debugcn 发表于 Dev

因子

我正在创建条形图，作为d3中更大的数据可视化的一部分。我希望能够在可视化的一部分中更改数据，并且所有图表都将更新。图表的简化版本如下。

var dataset = [1, 3, 5, 3, 3];

...
var svg = d3.select("body #container").append("svg")
        .attr("width", width)
        .attr("height", height);

    var g = svg.append("g");
...

我使用此svg元素创建其他图表，例如地图，圆形等。条形图是这样实现的。

 function bars(dataset) {
      var barChart = g.selectAll("rect.bar")
        .data(dataset)
        .enter();

      barChart.append("rect")
        .attr("class", "bar")
        .attr("x", function(d, i) { return i * 30 + 100; })
        .attr("y", function(d) { return (height - 130) - d * 4;})
        .attr("width", 25)
        .attr("height", function(d) { return d * 4; });


       barChart.append("text")
        .text(function(d) { return d; })
        .attr("x", function(d, i) { return i * 30 + 103; })
        .attr("y", function(d) { return (height - 130) - d/10 - 5;})
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .attr("fill", "darkgray"); 
}

现在，这使条形图很好，但是有一个功能

...
.on("click", function() {
   ...
   var newdata = [5, 2, 6, 2, 4]; // new values
   g.selectAll("rect.bar").remove();  // This removes the bars
   g.selectAll("text").remove();    // Problem here: All texts are removed
   bars(newdata);
}

我尝试使用.remove（）函数将条形图转换为新值。这适用于条形矩形，因为没有其他条形图，但是当我尝试删除上面显示的值标签时，所有其他文本元素也被删除了。有没有一种方法只能更新与条形相关的文本？

里查德韦斯特纳拉

您是否尝试过将一个类应用于文本并仅选择要删除的那些类？例如

barChart.append("text")
  .attr('class','label')
  .text(function(d) { return d; })

然后

g.selectAll(".label").remove();

顺便说一句，如果不是在更新之间删除所有元素，那么您不是考虑删除所有元素，而是考虑使用新数据enter()并将exit()其绑定到现有元素，而仅删除发生变化的元素吗？

编辑像这样：

function bars(dataset) {
  var bar = g.selectAll(".bar").data(dataset);

  bar.exit().remove();

  bar.enter().append("rect").attr("class", "bar");

  bar
    .attr("x", function(d, i) { return i * 30 + 100; })
    .attr("y", function(d) { return (height - 130) - d * 4;})
    .attr("width", 25)
    .attr("height", function(d) { return d * 4; });

  var label = g.selectAll(".label").data(dataset);

  label.exit().remove();

  label.enter().append("text").attr("class", "label");

  label
    .text(function(d) { return d; })
    .attr("x", function(d, i) { return i * 30 + 103; })
    .attr("y", function(d) { return (height - 130) - d/10 - 5;})
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .attr("fill", "darkgray"); 
}