D3.js animated grouped bar chart with variable number of groups

Question

I am trying to adapt the animated grouped bar chart example from https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1

for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.

I have already added the resizing of the domains with

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

in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example. For now I only care about the grouped version, not the stacked one.

I would appeciate any pointers

Answer 1

Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me