时间戳

首页 > 解决方案 > dc.js：即使将 mouseZoomable 设置为 false，也无法滚动过去的图表

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

问题描述

背景

我创建了一个图表并实现了点击缩放/鼠标输出重置缩放功能，如下所示。

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

问题

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

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

问题

什么可能导致这个问题，解决方案是什么？

谢谢！

标签： d3.jsdc.js

解决方案

我从 dc.js 股票示例中制作了一个块，该示例mouseZoomable在Monthly Index Abs Move & Volume/500,000 Chart中使用，并应用了您的更改。

实际上，它会禁用缩放，但在禁用后仍会禁用滚轮mouseZoomable。

正如dc.js#991所讨论的，dc.js 删除缩放的方式是不正确的。根据d3-zoom 文档，这应该是正确的：

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

确实，我在这个 fork of the block中尝试过，它似乎工作得更好。我认为这也是链接问题的正确解决方案。

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

推荐阅读