Как добавить атрибут tabindex в круговую диаграмму nvd3?

Question

У меня есть базовая круговая диаграмма с 3 клиньями. Когда вы нажмете клин пирога, появится всплывающая подсказка. Я намерен использовать те же функции для события keydown.

Сценарий: если срез кусочка имеет фокус, пользователь может нажать клавишу (например: ввести), которая отобразит всплывающую подсказку точно, как происходит событие клика.

Я полагал, что для этого потребуется 2 шага.

1. сделать каждый пирог клин (.nv-ломтик) фокусируемый, добавляя «TabIndex = 0» атрибут
2. Добавить прослушиватель событий, который вызывает всплывающую подсказку подобно тому, как событие щелчка делает.

Вот plunkr, который показывает описанное поведение: http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview (благодаря @ThanasisGrammatopoulos)

Первые вещи сначала, как я могу добавить атрибут TabIndex для каждого пирога клина? Когда я пытаюсь выполнить следующий код, он не появляется:

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

Любые идеи?

Answer 1

Так,

Функция setAttribute является Vanila JavaScript, поэтому он должен быть использован на реальном яваскрипта HTML элемента.

У вас есть 2 варианта,

Solution 1

Получить яваскрипта HTML элемент, используя функцию each, а затем получая его от this.

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

Решение 2

Или, как мы знаем из JQuery (а варьируются Polular библиотека библиотеки), вы можете попробовать, чтобы увидеть, если эквивалентная функция setAttribute существует, эта функция attr.

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

Конечно, все это внутри функции обратного вызова.