如何为nvd3饼图添加tabindex属性? [英] How can I add a tabindex attribute to an nvd3 pie chart?

问题描述

我有一个带有3个楔形的基本饼图.当您单击饼图的楔形时，将显示一个工具提示.我的目的是为按键事件提供相同的功能.

I have a basic pie chart with 3 wedges. When you click on a wedge of the pie, a tooltip will display. My intent is to have the same functionality for a keydown event.

方案:当饼图具有焦点时，用户可以按一个键(例如:enter)，该键将准确显示单击事件的工具提示.

Scenario: When a pie slice has focus, a user can hit a key (ex: enter) which will display the tooltip exactly how the click event does.

我认为这将需要2个步骤.

I figured this will require 2 steps.

1. 通过添加"tabindex = 0"属性使每个饼图(.nv-slice)具有焦点
2. 添加事件触发工具提示的事件侦听器，类似于单击事件.

以下是显示所描述行为的插件: http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview (感谢@ThanasisGrammatopoulos)

Here is the plunkr that shows the described behavior: http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview (thanks to @ThanasisGrammatopoulos)

首先，如何为每个饼形图添加tabindex属性?当我尝试以下代码时，它似乎没有出现:

First things first, how can I add a tabindex attribute to each pie wedge? When I try the following code it does not seem to appear:

d3.selectAll('.nv-slice').setAttribute("tabindex", "0");

有什么想法吗?

推荐答案

所以

函数setAttribute是普通的javascript，因此必须在真正的javascript html元素上使用.

The function setAttribute is a vanila javascript, so it has to be used on a real javascript html element.

您有2个选项，

解决方案1 ​​

使用功能each获取javascript html元素，然后 从this获取.

Get the javascript html element, using the function each and then getting it from this.

d3.selectAll('.nv-slice').each(function(){
    this.setAttribute("tabindex", "0");
});

解决方案2

或者我们从jQuery(一个可变的polular库库)中了解到，您可以尝试查看setAttribute的等效功能是否存在，该功能为attr.

Or as we know from jQuery (a vary polular library library) you can try to see if the equivalent function of the setAttribute exist, this function is attr.

d3.selectAll('.nv-slice').attr("tabindex", "0");

当然，回调函数中的所有内容.

Of course all that inside the callback function.

这篇关于如何为nvd3饼图添加tabindex属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！