如何将tabindex属性添加到nvd3饼图？

Question

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

场景：当饼图切片具有焦点时，用户可以点击一个键（例如输入），这将显示工具提示的确切点击事件的作用。

我认为这需要两个步骤。

1. 通过添加'tabindex = 0'属性使每个饼形楔形（.nv-slice）可聚焦
2. 添加一个触发工具提示的事件侦听器，类似于click事件的工作提示。

以下是显示所述行为的plunkr： http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview （感谢@ThanasisGrammatopoulos）

首先，我如何为每个饼形楔添加一个tabindex属性？当我尝试以下代码时似乎没有出现：

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

有什么想法吗？

Answer 1

所以，

函数setAttribute是一个vanila javascript，因此必须在真正的javascript html元素上使用。

您有2个选项，

解决方案1 ​​

使用函数each然后获取javascript html元素 从this获得它。

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

解决方案2

或者我们从jQuery（一个不同的polular库库）中知道，您可以尝试查看setAttribute的等效函数是否存在，此函数是attr。

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

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