nvd3円グラフにtabindex属性を追加するにはどうすればよいですか？

Question

私は3つのウェッジを備えた基本的な円グラフを持っています。パイのくさびをクリックすると、ツールチップが表示されます。私の意図は、keydownイベントと同じ機能を持つことです。

シナリオ：円のスライスにフォーカスがある場合、ユーザーは、クリックイベントがどのように正確に表示されるかを示すツールチップを表示するキー（例：enter）を押すことができます。

これには2つのステップが必要だとわかりました。

1. は
2. は、クリックイベントがありませんどのように似たツールチップをトリガーするイベントリスナーを追加「でtabindex = 0」属性を追加することにより、各パイウェッジ（.nvスライス）フォーカス可能にします。ここで

説明挙動を示し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

thisからそれを取得機能eachを使用して、javascriptをhtml要素を取得し、その後 を持っています。

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

ソリューションは、2

それとも我々がjQueryのから知っているようsetAttributeの同等の機能が存在するかどうかを確認しようとすることができます（aはpolularライブラリのライブラリを変える）、この関数はattrです。

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

もちろん、コールバック関数内のすべてです。