Ankerelement vor jeder Balkenspalte einfügen, damit es tabbierbar wird

Question

Ich versuche, mein Diagramm 508 kompatibel zu machen. Um es also zu ermöglichen, mit Hilfe der Tastatur durch das Diagramm zu navigieren, möchte ich Ankerelemente vor jeder Balkenspalte hinzufügen. Ich habe es versucht:

d3.select("svg").insert("a",".nv-bar").attr("href",""); 

aber es hat nicht funktioniert. Kann jemand einen besseren Weg vorschlagen, es zu tun. Vielen Dank !

Answer 1

Hier ist eine Möglichkeit, es zu tun:

d3.selectAll('.nv-bar') 
    .each(function() { 
    var el = this; 
    d3.select(el.parentNode) 
     .insert('a', function(){return el;}) 
     .attr('href', ''); 
    }); 

Das Insert Methode Elemente hinzufügen zu jedem Element in der aktuellen Auswahl, und zwar unabhängig davon, wie viele Elemente die „vor“ Parameter Streichhölzer.

Meine Lösung fügt für jeden Balken im Dokument einen Anker hinzu und hat den Vorteil, dass die insert-Methode eine Auswahlzeichenfolge oder eine Funktion akzeptieren kann, die ein einzufügendes Element zurückgibt. (Obwohl, etwas frustrierend, es nicht einen DOM-Knoten direkt annehmen)

Edit: Hier ist ein jsfiddle mit einem Beispiel: https://jsfiddle.net/bgp6atzo/