如何禁用D3-brush中按住SHIFT锁定x/y位置的功能？

嘿，这个问题我之前做可视化项目的时候刚好碰到过，其实只需要在brush的事件处理里拦截SHIFT键的默认行为就行，给你两种可行的方法：

方法一：在brush的start事件中禁用锁定逻辑 #

当brush开始拖动时，检测到SHIFT键按下，我们可以阻止默认行为并修改事件的shiftKey状态，让d3-brush的内部逻辑跳过锁定方向的步骤：

const brush = d3.brush()
  .extent([[0, 0], [width, height]]) // 替换成你的brush实际范围
  .on("start", (event) => {
    if (event.sourceEvent.shiftKey) {
      // 阻止浏览器的默认SHIFT行为
      event.sourceEvent.preventDefault();
      // 让brush认为SHIFT键没被按下，避免触发锁定
      event.sourceEvent.shiftKey = false;
    }
  })
  .on("brush", (event) => {
    // 这里编写你处理brush选择的业务逻辑
    if (event.selection) {
      // 比如更新选中区域的高亮、过滤数据等
    }
  });

// 将brush应用到目标SVG元素上
d3.select("svg").call(brush);

方法二：重写brush的核心_move方法（更彻底） #

如果第一种方法在某些场景下不够彻底，你可以直接重写brush内部的_move方法，完全移除SHIFT键锁定方向的逻辑：

const brush = d3.brush()
  .extent([[0, 0], [width, height]]);

// 先保存原始的_move方法，避免完全覆盖丢失其他功能
const originalMove = brush._move;

// 重写_move方法，临时屏蔽shiftKey检测
brush._move = function(event) {
  const originalShiftKey = event.sourceEvent?.shiftKey;
  // 如果SHIFT键被按下，临时将其设为false
  if (originalShiftKey) {
    event.sourceEvent.shiftKey = false;
  }
  // 调用原始的_move方法执行正常的拖动逻辑
  originalMove.call(this, event);
  // 可选：恢复shiftKey的原始状态，避免影响其他事件处理
  if (originalShiftKey !== undefined) {
    event.sourceEvent.shiftKey = originalShiftKey;
  }
};

// 添加brush事件监听并应用到SVG
brush.on("brush", (event) => {
  if (event.selection) {
    // 处理你的选择逻辑
  }
});

d3.select("svg").call(brush);

第一种方法比较轻量，适合大多数常规场景；第二种方法更彻底，直接修改brush的核心行为，适合需要完全移除这个SHIFT锁定特性的情况。

内容的提问来源于stack exchange，提问作者John