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

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

场景：当饼图切片具有焦点时，用户可以按一个键（例如：enter），该键将精确显示工具提示单击事件的方式

我想这需要两个步骤

通过添加“tabindex=0”属性，使每个饼图楔形（.nv切片）可聚焦

添加触发工具提示的事件侦听器，类似于单击事件的方式 以下是显示所述行为的plunkr： （感谢@ThanasisGrammatopoulos）

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

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

有什么想法吗？

那么

函数

setAttribute

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

你有两个选择

解决方案1

使用函数

each

获取javascript html元素，然后 从

此

获取它

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

解决方案2

或者，正如我们从jQuery（一个不同的polular库）了解到的那样，您可以尝试查看是否存在

setAttribute

的等效函数，该函数是

attr

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

当然，所有这些都在回调函数中。

所以

函数

setAttribute

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

你有两个选择

解决方案1

使用函数

each

获取javascript html元素，然后 从

此

获取它

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

解决方案2

或者，正如我们从jQuery（一个不同的polular库）了解到的那样，您可以尝试查看是否存在

setAttribute

的等效函数，该函数是

attr

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

当然，所有这些都在回调函数中。

啊，我需要.each（）函数！为了添加“enter”键，我是否会以调用on click函数的相同方式添加事件侦听器？啊，我需要.each（）函数！为了添加“enter”键，我是否会以调用on click函数的相同方式添加事件侦听器？