d3：通过特定元素拦截keydown事件

我想确定发生在特定D3元素上的按键事件。下面的代码段（JSFiddle）正确地标识了单个div上的鼠标和全局按键事件，但似乎没有触发div特定的按键处理程序（仅在Chrome上测试）。什么是最简单的方法要么：d3：通过特定元素拦截keydown事件

识别div/svg光标已经结束，或
附加按键处理到特定div/svg

？

_.each(_.range(2), function (i) { 
    var svg = d3.select("#plot" + i).append("svg") 
     .attr("width", 100) 
     .attr("height", 100); 

    svg.append("rect") 
     .attr("fill", "red") 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("width", 100) 
     .attr("height", 100) 
     .on("mouseover", function() { console.log("mouseover", i); }) 
     .on("keydown", function() { console.log("div key", i); }); 
}); 

d3.select("body").on("keydown", function() { console.log("global key"); });

谢谢！

编辑

作为后续，我想我可以捕捉鼠标悬停处理程序中的DIV ID，并用它来识别在全球keydown事件相应的div - 但我很好奇，如果有一个更优雅或习惯解决方案。

来源

2013-11-21 JohnJ

您可以使用['elementFromPoint']（https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint）获取元素'd3.select'并调用函数在上面。 –

如果矩形上有文本标签，那可能会有点奇怪。 elementFromPoint只抓取视图中最顶层的元素。 – Gopherkhan

* D'哦。你的编辑完全是这个解决方案。是的，这可能是处理它的最好方法。 *

您可能需要使用鼠标悬停处理程序，以保持当前的重点元素的轨道，然后使用页面监听器委派事件到该节点。

是这样的：

var focused = null; 
svg.append("rect").on("mouseover", function() { focused = this; })

，然后在页面处理程序：

d3.select("body").on("keydown", function() { d3.select(focused); /* then do something with it here */ });

来源

2013-11-21 16:44:43 Gopherkhan

谢谢，我做了这样的事情。我会保持这个开放一段时间，看看是否有人在旁听。 – JohnJ

不用担心。感谢您的关注:) – Gopherkhan

你也可以使用d3.event.stopPropagation（），以确保事件冒泡的身体。

来源

2013-12-12 18:19:25 wes

d3：通过特定元素拦截keydown事件

回答

相关问题