How to clear stacked chart without render

Question

I have barChart with few stacks:

chart
    .dimension(dim)
    .group(group1, element1)
    .groupBars(true)
    .stack(group2, element2)
    .stack(group3, element3)

Later I add new dimension and groups to current chart:

chart
    .dimension(newDim)
    .group(newGroup1, newElement1)
    .groupBars(true)
    .stack(newGroup2, newElement2)

chart.redraw();

And get something strange:

Looks like the chart have green bars from previous stacks. If I do chart.render() instead of chart.redraw() all is ok, but redraw() looks much better. How can I fix this?

UPDATE:

I think I need to remove old dimension and/or groups from chart, but how can I do this?

Answer 1

This is just a guess because you haven't provided code.

As I commented above, I thought it was a bug in the implementation of grouped bars you are using.

But actually, I think it's a bug in dc.js core: it's not expecting the number of stacks to change without a render. I found a reference to the bug here. (There was originally a lot of things that only worked for render, not redraw, and we're slowly patching those.)

Try this when you replace the stacks:

for(var i = nstacks; i < 20; ++i) 
    chart.selectAll('g.stack._' + i + ' rect').remove()

where nstacks is the number of stacks in the new chart. It will remove any excess stacks, and the existing ones should still transition okay.