gpt4 book ai didi

d3.js - 如何在 D3 强制布局中捕获击键事件?

转载 作者:行者123 更新时间:2023-12-03 11:45:28 25 4
gpt4 key购买 nike

我想响应针对我的力布局中的节点的击键事件。我已经尝试添加我能想到的“按键”、“按键”、“按键”、“按键”的所有变体,但它们都没有被触发。我的鼠标事件触发得很好。我在 d3 源中找不到任何击键事件......有没有办法捕获击键?

        nodes.enter().append("circle")
.on("click", function(d) { return d.clickHandler(self); })
.on("mouseover", function(d) { return d.mouseOverHandler(self); })
.on("mouseout", function(d) { return d.mouseOutHandler(self); })
.on("keyup", function(d) {
console.log("keypress", d3.event); // also tried "keyup", "keydown", "key"
})
.classed("qNode", true)
.call(force.drag);

最佳答案

我认为这里的问题是您试图向不可聚焦的元素添加键盘事件,请尝试添加 keydown事件到可聚焦元素(在这种情况下为主体):

d3.select("body")
.on("keydown", function() { ...

在这里您可以使用 d3.event 的属性,例如 d3.event.keyCode ,或者对于更特殊的情况, d3.event.altKey , d3.event.ctrlKey , d3.event.shiftKey , 等等..

看着 KeyboardEvent Documentation也可能有帮助。

我在这里做了一个简单的键盘交互 fiddle : http://jsfiddle.net/qAHC2/292/

您可以通过创建一个变量来“选择”当前对象来扩展它以将这些键盘交互应用于 svg 元素:
var currentObject = null;

然后在适当的鼠标事件方法期间更新此当前对象引用:
.on("mouseover", function() {currentObject = this;})
.on("mouseout", function() {currentObject = null;});

现在,您可以在之前设置的键盘交互中使用此当前对象。

这是一个 jsfiddle 的实际操作: http://jsfiddle.net/qAHC2/295/

关于d3.js - 如何在 D3 强制布局中捕获击键事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15261447/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com