Bar charts with rangeChart breaks mouse zoom on second render call.

[Spacarar]

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.

[kum-deepak]

The charts are not tested actively for more than one render call. For some charts, it might work. As of now dc does not handle resizing on its own. The next version of dc is likely to have an automatic resize option - the code will be similar to #1853

I will suggest using https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver to observe and resize for now.