D3.js动画分组条形图，具有可变数量的组

Question

我正在尝试调整动画分组条形图示例 https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1

出于我自己的目的。我现在停留的一个修改是我的数据将具有可变数量的组，并且xAxes和块必须相应地调整大小。

我已经使用

添加了域名的大小调整

  x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
  x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])

在更新功能中，但这似乎不够。虽然正确调整了条的宽度，但是x值不是均匀间隔的，而是在初始创建后添加更多元素时被推入图的最右侧角。 现在我只关心分组版本，而不是堆叠版本。

我会指出任何指针

Answer 1

可以通过在更新之前清除barContainer来解决问题。这当然可以防止已经存在的条形图的转换，但这对我来说已经足够了