How to clear a stacked diagram without rendering
I have barChart
with multiple stacks:
chart
.dimension(dim)
.group(group1, element1)
.groupBars(true)
.stack(group2, element2)
.stack(group3, element3)
Later, I will add new dimensions and groups to the current graph:
chart
.dimension(newDim)
.group(newGroup1, newElement1)
.groupBars(true)
.stack(newGroup2, newElement2)
chart.redraw();
And you get something weird:
It looks like the chart has green bars from previous stacks. If I do chart.render()
instead chart.redraw()
, everything is fine, but redraw()
it looks much better. How can I fix this?
UPDATE:
I think I need to remove old dimensions and / or groups from the chart, but how can I do that?
source to share
This is just an assumption because you didn't provide the code.
As I said above, I thought it was a bug in the implementation of the grouped bars you are using.
But actually, I think this is a bug in the core dc.js: it doesn't expect the number of stacks to change without rendering. I found a link to the bug here . (Initially there were a lot of things that only worked for rendering, not redrawing, and we're slowly fixing them.)
Try this when swapping 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 diagram. It will remove all the extra stacks, and the existing ones must still go.
source to share