dc.js: cannot scroll past chart even after setting mouseZoomable to false

Question

Background

I have created a chart and implemented a click-to-zoom/mouseout-to-reset-zoom feature as follows.

chart.on('pretransition', (c) => {
  // click to enable zooming
  c.select('svg').on('click.enablemousezoomable', () => {
    c.focus();
    c.mouseZoomable(true).render();
  });

chart.on('postRedraw', (c) => {
  // mouseleave to disable zooming
  c.select('svg').on('mouseleave.disablemousezoomable', () => {
    c.focus();
    c.mouseZoomable(false).render();
  });
});

Problem

While the feature works as intended, the problem is that after redrawing, page scrolling is impossible if the cursor remains on the chart.

The cursor needs to be moved off of the chart in order to get page scrolling to work.

Question

What might be causing this problem and what is the solution?

Thanks!

Answer 1

I made a block from the dc.js stock example, which uses mouseZoomable in the Monthly Index Abs Move & Volume/500,000 Chart, and applied your changes.

Indeed, it disables zoom but it still leaves the wheel disabled after mouseZoomable has been disabled.

As dc.js#991 discusses, the way dc.js removes zoom is incorrect. According to the d3-zoom documentation, this should be correct:

moveChart._nullZoom = function(sel) {
    sel.on('.zoom', null);
};

Indeed, I tried it in this fork of the block, and it seems to work much better. I think it's the correct fix for the linked issue, too.

There are some artifacts due to the redraws for adding and removing zoom, but I think they are out of scope for this question.