只为字符键按下启用d3刷？

Question

我正在尝试在同一个 d3 图表上同时使用 d3 缩放和 d3 画笔。我想在键盘上按住“B”键时启用画笔，否则禁用画笔。因此，缩放将是默认功能，当按住键盘上的“B”键时将被禁用。

我在 d3 brush repo 上发现了一个 git issue thread 使完全相同的功能适用于“Shift”键而不是“B”键。虽然该线程上可用的解决方案适用于“Shift”键，但我无法使相同的方法适用于“B”键。

“B”键无效的实现

  var time_brush = d3.brushX()
                    .filter(function(event) {
                      return event.keyCode == 66
                    })
                    .keyModifiers(false)
                    .extent([[0, 0],[time_line_chart_params.w, time_line_chart_params.h]])  
                    .on("end", setTimeRange);

  var zoom = d3.zoom()
              .scaleExtent([1,2])
              .extent([[0, 0], [w, h]])
              .translateExtent([[0, 0], [w, h]])
              .filter(function(event) {
                return !(event.keyCode == 66)
              })
              .on("zoom", updateChart)

有效的“Shift”键的实现

  var time_brush = d3.brushX()
                    .filter(function(event) {
                      return event.shiftKey
                    })
                    .keyModifiers(false)
                    .extent([[0, 0],[time_line_chart_params.w, time_line_chart_params.h]])  
                    .on("end", setTimeRange);

  var zoom = d3.zoom()
              .scaleExtent([1,2])
              .extent([[0, 0], [w, h]])
              .translateExtent([[0, 0], [w, h]])
              .filter(function(event) {
                return !event.shiftKey
              })
              .on("zoom", updateChart)

我还提到了可用于读取按键事件的选项here，并更改了

event.keyCode == 66

到

event.code == 'KeyB

并尝试检查 event.type 除了关键代码之外

event.type == 'keydown' && event.keyCode == 66

和

event.type == 'keydown' && event.code == 'KeyB'

我的尝试都没有成功

请帮忙！