Wie kann ich ein Tabindex-Attribut zu einem nvd3 Kreisdiagramm hinzufügen?

Question

Ich habe ein einfaches Kreisdiagramm mit 3 Keilen. Wenn Sie auf einen Teil des Kuchens klicken, wird eine QuickInfo angezeigt. Meine Absicht ist, die gleiche Funktionalität für ein Keydown-Ereignis zu haben.

Szenario: Wenn ein Kreissegment den Fokus hat, kann ein Benutzer eine Taste drücken (zB: enter), die den Tooltip genau anzeigt, wie das Klickereignis funktioniert.

Ich dachte, dies wird 2 Schritte erfordern.

1. jede Torte Keil Make (.nv-Scheibe) fokussierbar durch eine Zugabe Attribut ‚tabindex = 0‘
2. ein Ereignis-Listener hinzufügen, die den Tooltip ähnlich, wie löst ein Click-Ereignis der Fall ist.

Hier ist die plunkr, die das beschriebene Verhalten zeigt: http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview (dank @ThanasisGrammatopoulos)

Das Wichtigste zuerst, wie kann ich ein tabindex-Attribut zu jedem Kreissegment hinzufügen? Wenn ich den folgenden Code versuche, scheint es nicht zu erscheinen:

Irgendwelche Ideen?

Answer 1

So

Die Funktion setAttribute ist ein vanila Javascript, so dass es auf einem echten Javascript html-Element verwendet werden muss.

Sie haben 2 Möglichkeiten,

Lösung 1

JavaScript html-Element holen, mit der Funktion each und dann es von this bekommen.

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

Lösung 2

Oder wie wir von jQuery kennen (a polular Bibliothek Bibliothek variieren) Sie versuchen können, wenn die entsprechende Funktion des setAttribute zu sehen gibt, ist diese Funktion attr.

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

Natürlich alles innerhalb der Callback-Funktion.