Bar charts with rangeChart breaks mouse zoom on second render call. #1857
Description
Description of problem
When you have a bar chart that includes a mouse-zoomable range chart attached, calling render more than once breaks the mouse zooming. After the second render call, any attempt to zoom the mouse will yield only a small section of the selectable area.
Steps to reproduce
- go to the https://dc-js.github.io/dc.js/examples/focus-ordinal-bar.html
- open the console
dc.renderAll()- try and zoom with the mouse along the focus bar chart.
- see the following result
discussion
The reason I'm calling render more than once, is because it's the easiest way for the charts to resize themselves properly when the window changes size that I have found. If there is a better, or more correct solution for this problem then I would like to know.
The problem appears to lie somewhere in the _configureMouseZoom() call and replacing the _doRender function to exclude this after the first call seems to fix the solution at least temporarily.
so, my temporary fix is to do something like
let chart = new dc.BarChart('#the-chart')
...chartStuff
let focusChart = new dc.BarChart('#the-chart-scale')
...focusChartStuff
chart.rangeChart(focusChart)
chart.render()
focusChart.render()
// take out this._configureMouseZoom()
// see coordinate grid mixin docs above for original function definition that we are overriding
chart._doRender = function() {
this.resetSvg();
this._preprocessData();
this._generateG();
this._generateClipPath();
this._drawChart(true);
return this
}Thanks for your consideration and any input you have on how to fix this issue going forward.