更新分组条形图(转换或删除元素组）

Update a grouped bar chart (transition or removal of groups of elements)

本文关键字：删除 元素 条形图 更新 转换      更新时间：2023-09-26

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

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

但是：它只会在每次更新时附加越来越多的组，没有过渡或退出。我知道这个问题：D3：使用组中的多个元素更新数据。但是，我认为按照答案中的描述进行了设置，但没有成功。

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

这是没有组的工作示例：http://jsfiddle.net/w2q0kjgd/2/

这是组不起作用的示例：http://jsfiddle.net/o3fpaz2d/9/

我知道距离最初的发布已经快一个月了，我试图在中间做一些其他事情，然后再次看看这个问题，有时这会有所帮助。但我就是想不通...

请在选择所有条形之前更新组。

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

我认为这里的诀窍是您需要更新和合并两次。一个用于 x0 轴整体组，另一个用于该组中的条形图。希望这对你也有用。

相关文章：