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

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

我正在尝试实现相同的function，但在饼图的div元素OUTSIDE上。

场景：

1. 专注于“Cat 1”div和点击输入的用户显示Cat 1楔形的工具提示

2. 专注于“Cat 2”div和点击输入的用户显示Cat 2楔形的工具提示

3. 专注于“Cat 3”div和点击输入的用户将显示Cat 3楔形的工具提示

我尝试过以下方面的事情：

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

但是，如果你在plunkr中看到，那不会触发任何东西。 如何让这些潜水触发相应的工具提示？

 $(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(); } }); 

Answer 1

当我们点击按钮以显示工具提示时，我们需要触发饼图部分的相应事件。

看看我的Plunk： http ：//plnkr.co/edit/GP9h6eEe4DE8MM9jXolc？p = preview（使用按钮） http://plnkr.co/edit/MM5nvJ?p=preview （使用Div元素）

  function TriggerEvent(eventName, pieSection, clientX, clientY) { var event = document.createEvent("MouseEvent"); // possible values for eventName for our example are mouseover,mouseout event.initMouseEvent(eventName, true, true, window, 0, 0, 0, clientX, clientY); pieSection.dispatchEvent(event); } 

按钮点击调用上面的function：

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

Answer 2

您只需将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; 和opacity: 0 。 你可以用jQuery做到这一点：

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

但是，我建议不要使用jQuery对D3工具箱进行这样的操作。 看一下D3的文档，了解如何以编程方式显示工具箱。 以下是plunkr中的更改： http ：//plnkr.co/edit/qNQfdpCMWXOypSqczXXi？p = preview