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

Question

我有一个简单的 pie chart .当您单击饼图楔形时，会显示该扇形图的工具提示。

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

场景:

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

点击按钮调用上面的函数:

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