I am working on the following project:
The project produce charts (d3.js) and there are transitions implemented between charts using jQuery:
fadeOut --> remove elements in chart --> update elements in chart with new chart --> fadeIn
So far so good, but every time the elements of the chart (#chart children) are removed and display is “none” the text underneath move to the top, before the div #chart is filled with new content, after which the lower text return to its correct position under #chart.
The undesired effect is a flicking due to lower text coming up every time the transition happens between figures. The problem is a CSS/HTML one, that should be solved with Bootstrap, but I don’t know how. The solution I have tried to implement is to fix the size of the div row that is parent of the div #chart, but I haven’t succeeded: html/css doesn’t respect the styled height even when
!important. I have also tried to include the lower text in a row with no progress.
EDIT: I found a partial solution, in this case inserting all elements in a table and fixing the size of the cells.
I would like to hear another solution using CSS/HTML? You would be able to see the resulting solution using the same link:
OBS: In fact, I suspect that a cleaner solution could be finding ways to keep the svg and deleting its content using a d3.js-based method (exit-remove in d3.js parlance) instead, but that would have meant a revision of my code, something that I didn’t want to make now. Preferred an easier, quick solution. In another opportunity for sure…