dc.js：即使将 mouseZoomable 设置为 false 也无法滚动过去图表

Question

背景

我创建了一个图表并实现了一个 click-to-zoom/mouseout-to-reset-zoom 功能，如下所示。

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();
  });
});

问题

虽然该功能按预期工作，但问题是重绘后，如果光标留在图表上，则无法滚动页面。

需要将光标移出图表才能使页面滚动正常工作。

问题

可能导致此问题的原因是什么？解决方案是什么？

谢谢！

Answer 1

我从 dc.js 股票示例中截取了一个块，该示例在 月度指数绝对值移动和 Volume/500,000 图表中使用 mouseZoomable , 和 applied your changes.

的确，它禁用了缩放功能，但在禁用 mouseZoomable 后仍然禁用滚轮。

作为dc.js#991 discusses, the way dc.js removes zoom is incorrect. According to the d3-zoom documentation，这应该是正确的：

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

的确，我在this fork of the block试过了，好像效果好多了。我认为这也是链接问题的正确解决方法。

由于添加和删除缩放的重绘，存在一些伪影，但我认为它们超出了这个问题的范围。

dc.js：即使将 mouseZoomable 设置为 false 也无法滚动过去图表

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

d3.js

dc.js