Javascript 更新分组条形图（元素组的转换或删除）

我正在尝试实现的扩展版本。除了更新情节外，一切正常。在常规条形图中，我会这样做：

function draw(data) {

  // Join the data with the selection
  var bars = svg.selectAll(".bar")
      .data(data);

  // Create new bars if needed
  bars.enter().append("rect")
      ...

  // Update existing bars if needed
  bars.transition()
      ...

  // Remove bars if needed
  bars.exit().remove();
}

工作起来很有魅力。现在，我在我的团队中尝试了同样的方法：

    var groups = chart.selectAll(".group")
            .data(data);

    groups.enter().append("g")
            .attr("class", "group")
            .attr("transform", function (d) {
                return "translate(" + 0 + "," + y(d.name) + ")";
            });

    var bars = groups.selectAll(".bar").data(function (d) {
        return d.values;
    });

    bars.enter().append("rect")
        ...

    groups.transition().duration(750).attr("transform", function (d) {
        return "translate(" + 0 + "," + y(d.name) + ")";
    });

    groups.exit().remove();

但是：它只在每次更新时附加越来越多的组，没有转换或退出。 我知道这个问题：。但是，我认为设置正如回答中所述，没有成功

编辑：我仍在努力解决这个问题。我更新了小提琴

以下是不带组的工作示例：

这是不适用于组的示例：

---

我知道从最初的帖子发布到现在已经快一个月了，我试着在这期间做些别的事情，然后再看看这个问题，有时这会有所帮助。但我就是想不出来…

请在选择所有栏之前更新组

var groups = chart.selectAll(".group")
            .data(data);
    groups.enter()...

    groups.transition().duration(750).attr("transform", function (d) {
            return "translate(" + 0 + "," + y(d.name) + ")";
        });

    var bars = groups.selectAll(".bar").data(function (d) {
            return d.values;
        });

    //add bars
    //update bars

    bars.exit().remove();

    groups.exit().remove();

---

我也在玩同一个方块，并试图找出它。最终，这个解决方案对我起了作用：

    var bars = g
                .selectAll("g")
                .data(data, function(d) {return d ? d.format_date : this.id; });

     var enter = bars
                .enter().append("g");

     bars = enter.merge(bars)
          .attr("transform", function(d) { return "translate(" + x0(d.format_date) + ",0)"; });

     var rect = bars
          .selectAll("rect")
            .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })

     rect
        .enter().append("rect").merge(rect)
        .attr("x", function(d) { return x1(d.key); })
        .attr("y", function(d) { return y(d.value); })
        .attr("width", x1.bandwidth())
        .attr("height", function(d) { return height - y(d.value); })
        .attr("fill", function(d) { return z(d.key); });

---

我认为这里的诀窍是你需要更新和合并它两次。一个用于整个组，另一个用于该组中的杆。希望这也能对你起作用。

暗中拍摄，但我想知道

键

是否能帮助你在嵌套选择中进行数据绑定：

var bar=groups.selectAll（.bar”）.data（函数（d）{return d.values；}，函数（d）{return d；}）这并没有改变任何东西…您能在JSFIDLE或Plunker上创建一个可复制的示例吗？很抱歉，我花了一些时间才回到这个问题上。这里有一个提琴：例如，当你点击“按名称排序”时，它应该会更新。