javascript 按下触摸板或鼠标滚轮的d3js平移

8ulbf1ek 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(136)

- bounty将在3天后过期**。回答此问题可获得+100的声誉奖励。Marty正在寻找来自声誉良好来源的答案：支持按下鼠标滚轮或在触摸板上移动两个手指的摇摄示例

我用d3js创建了缩放行为

const zoom = d3
      .zoom<SVGSVGElement, unknown>()
      .filter(function (event) {
        return event.which === 2 || event.type === 'wheel';
      })
      .scaleExtent([-10, 10])
      .on('zoom', handleZoom);

如果我按下鼠标滚轮并移动鼠标，平移就可以工作，但在触摸板上，如果我把两个手指放在触摸板上并向同一个方向移动，我希望平移效果，但缩放却可以工作。是否有办法使用触摸板过滤平移事件？
x一个一个一个一个x一个一个二个一个x一个一个三个一个
我想将d3设置为通过滚动鼠标滚轮或在触摸板上放大/缩小来工作，并通过按住鼠标滚轮或在触摸板上以相同方向移动两个手指来平移工作

JavaScript

来源：https://stackoverflow.com/questions/74700109/d3js-pan-with-touchpad-or-mousewheel-pressed

1条答案

按热度按时间

thtygnil1#

您可以使用d3.event.sourceEvent属性检查触发缩放的事件类型。
例如，您可以检查事件是否为触摸事件，如果是，则可以检查触摸点的数量。如果触摸点的数量大于1，则可以将其视为平移事件并阻止缩放行为。
请改为执行以下操作：

const handleZoom = () => {
  if (d3.event.sourceEvent) {
    if (d3.event.sourceEvent.type === 'touchmove') {
      if (d3.event.sourceEvent.touches.length > 1) {
        // Treat as pan event
        return;
      }
    }
  }

  // Zoom behavior
  d3.select('#group').attr('transform', d3.event.transform);
}

使用此代码时，如果事件是触摸事件，并且触摸点的数量大于1，则函数将返回并且不应用缩放行为。

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 按下触摸板或鼠标滚轮的d3js平移

1条答案

相关问题

热门标签

最新问答