Javascript 如何使用键盘侦听器在调用时触发工具提示？

我有一个简单的问题。单击饼图楔块时，将显示该楔块的工具提示

我正在尝试实现相同的功能，但是在饼图之外的div元素上

场景：

关注“Cat 1”div并点击enter键的用户将显示Cat 1楔块的工具提示

关注“Cat 2”div并点击enter键的用户将显示Cat 2楔块的工具提示

关注“Cat 3”div并点击enter键的用户将显示Cat 3楔块的工具提示

我尝试了以下几点：

function ShowTooltip() {
    d3.selectAll('.nvtooltip').each(function(){
        this.style.setProperty('display', 'block', 'important');
    });
};

但如果你看到了，那不会触发任何东西。如何使这些俯冲触发相应的工具提示

$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode === 13 && $('.cat-count').is(':focus')) {
        console.log('do something');
        ShowTooltip();
    }   
}); 

---

您只需将

keydown

事件的侦听器设置为所需的元素：

$('.myDiv').keydown(function(event) {
    if (event.keyCode === 13) {
        console.log('do something');
        ShowTooltip();
    }   
});

或者使用您的方法检查

activeElement

是否是您想要的元素：

$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode === 13 && $(document.activeElement).is('.myDiv')) {
        console.log('do something');
        ShowTooltip();
    }   
});

---

编辑 要显示工具箱，您需要操作隐藏工具箱元素的CSS属性。它们是：

display:none和
不透明度：0
。可以使用jQuery执行此操作：

$('.toolbox').css('opacity', 1).css('display', 'block');

然而，我建议不要用jQuery操纵D3工具箱。查看D3的文档，了解如何以编程方式显示工具箱。以下是plunkr中的更改：
我们需要在单击按钮以显示工具提示时触发饼图部分的相应事件

查看我的Plunk：
（使用按钮）
（使用Div元素）

单击按钮调用上述功能：

TriggerEvent("mouseover", pieSection.node(), offset.left, offset.top);

重要信息在jquery中不起作用——我发现很难设置一个“关注”在“cat1”div上的方式，因为它们不关注焦点。你的意思是鼠标被覆盖了吗？当你向每个div添加一个tabindex=o属性时，它们可以通过对每个元素进行tab来获得焦点。这与我在原始帖子中所尝试的类似，设置是合理的，但它仍然不会触发工具提示
ShowTooltip（）
函数也有错误。查看我的更新答案。它似乎仍然没有打开工具提示，该功能确实启动，如控制台徽标所示。首先手动打开工具提示，它不是在开始时创建的。但是如上所述，使用D3API而不是jQuery来显示工具提示。谢谢，但是我希望它能在工具提示之间自动切换！我无法首先手动打开工具提示，因为我必须考虑严格依赖键盘的用户，谢谢，但我想在div上触发一个键盘事件来调用工具提示，请参阅原始帖子！这个例子是用as-u-wand而不是按钮实现的。签出这个：谢谢，它起作用了，请将你最新的plunker添加到答案链接，我会投票给这个答案！添加了两个链接1。使用按钮2。使用Div元素当我尝试将其复制到本地计算机时，会出现一些错误。偏移量返回为未定义部分和未定义部分。知道为什么吗？有什么东西需要在plunk之外申报吗？
TriggerEvent("mouseover", pieSection.node(), offset.left, offset.top);