在 D3.js 中检测按键

Question

我读过很多帖子和答案，但它们似乎都已经过时了。

我的目标是能够通过文本“制表符”并在输入和/或空格键上运行函数。我已经尝试过keyCode，，，，，，等等......charCode​keywhichkeypresskeyupkeydown

我有一个文本节点，可以使用以下选项进行切换：

.attr('role', 'button')
.attr('tabindex', '0')
.attr('focusable', 'true')
.on('click', sel)
.on('keypress', function(){if(key == 13 || key == 32){return sel}}) 

单击是完美的并且选项卡可以工作，只是使用空格和 Enter 时不会调用该函数。

任何帮助表示赞赏。

Answer 1

你必须使用d3.event.keyCode. 根据API，d3.event...：

... 在调用事件侦听器期间设置，并在侦听器终止后重置。使用它来访问标准事件字段。

这是一个基本的演示。单击“foo”、“bar”或“baz”进行聚焦，然后按任意键并查看控制台：

var body = d3.select("body");
var p = body.selectAll(null)
  .data(["foo", "bar", "baz"])
  .enter()
  .append("p")
  .attr('tabindex', '0')
  .attr('focusable', 'true')
  .html(String)
  .on("keypress", function() {
    if(d3.event.keyCode === 32 || d3.event.keyCode === 13){
    console.log("Congrats, you pressed enter or space!")
    }
  })

<script src="https://d3js.org/d3.v4.min.js"></script>