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

Question

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

场景：当一个饼图有焦点时，用户可以点击一个键（例如：回车），这将显示工具提示，就像点击事件一样。

我认为这需要 2 个步骤。

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

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

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

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

有什么想法吗？

Answer 1

所以，

函数setAttribute是一个普通的javascript，所以它必须用在一个真正的javascript html元素上。

你有两个选择，

解决方案 1

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

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

解决方案 2

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

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

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