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

Question

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

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

我认为这需要 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 元素上使用它。

您有 2 个选择，

解决方案 1

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

获取

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

解决方案 2

或者我们从jQuery（一个vary polular library库）知道的你可以试试看是否存在setAttribute的等价函数，这个函数是attr。

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

当然是在回调函数里面。