如何用D3.js实现类电子表格的键盘导航功能

要实现上下箭头在同列（相同data-field）输入框间切换焦点，你可以通过以下步骤补全逻辑：

完整事件处理代码 #

// 为表格内所有输入框绑定按键事件
d3.select('#data-table').selectAll('input')
  .on('keydown', function(event) {
    // 获取当前触发事件的输入框
    const currentInput = d3.select(this);
    const targetField = currentInput.attr('data-field');
    
    // 获取同列所有输入框的DOM节点数组
    const sameColumnInputs = d3.selectAll(`input[data-field="${targetField}"]`).nodes();
    // 找到当前输入框在数组中的索引
    const currentIndex = sameColumnInputs.indexOf(this);

    // 处理上箭头按键
    if (event.key === 'ArrowUp') {
      event.preventDefault(); // 阻止页面默认滚动行为
      // 计算目标索引：如果是第一个元素，跳转到最后一个；否则上移一位
      const targetIndex = currentIndex === 0 ? sameColumnInputs.length - 1 : currentIndex - 1;
      sameColumnInputs[targetIndex].focus();
    }
    // 处理下箭头按键
    else if (event.key === 'ArrowDown') {
      event.preventDefault();
      // 计算目标索引：如果是最后一个元素，跳转到第一个；否则下移一位
      const targetIndex = currentIndex === sameColumnInputs.length - 1 ? 0 : currentIndex + 1;
      sameColumnInputs[targetIndex].focus();
    }
  });

关键逻辑说明 #

1. 事件绑定：直接给表格内所有输入框绑定keydown事件，确保每个输入框都能响应按键操作。
2. 定位当前列：通过this（即事件触发的当前元素）获取输入框，读取其data-field属性确定所在列，比通过input:focus定位更可靠。
3. 转成DOM数组：使用.nodes()方法将D3选择集转换为原生DOM元素数组，方便通过indexOf获取当前元素的位置。
4. 索引计算与焦点切换：根据上下箭头按键计算目标输入框的索引（处理边界循环逻辑），调用原生focus()方法设置焦点，同时阻止浏览器默认滚动行为避免干扰。

兼容性提示 #

如果需要兼容旧环境，可将event.key替换为已废弃但仍广泛支持的event.keyCode：

• 上箭头：event.keyCode === 38
• 下箭头：event.keyCode === 40

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