Question

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

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: update data with multiple elements in a group。但是，我认为设置正如答案中所述，没有成功。

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

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

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

我知道自最初发布以来已经差不多一个月了，我试着在中间做一些其他事情，然后再次看看这个问题，有时这会有所帮助。但我无法弄清楚......

Answer 1

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

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

Answer 2

我也在玩同一个街区并试图解决这个问题。最后，这个解决方案对我有用：

    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轴整体组，另一个用于该组中的条形。希望这也适合你。

更新分组条形图（过渡或删除元素组）

2 个答案: