come assegnare un ID univoco all'elemento di testo SVG in d3 javascript

Question

Creazione di un grafico a barre in d3. Ho 30+ barre, con 30+ etichette corrispondenti sull'asse x. Vorrei che le etichette dell'asse X fossero nascoste quando la pagina si carica (funziona), E APPARE solo se i cursori dell'utente si trovano sopra la barra corrispondente (oggetto svg rect). Per fare questo sto assegnando un id per ogni rect e ogni elemento di testo. Quando i cursori dell'utente si sovrappongono al rettangolo, il testo verrà visualizzato SOLO per il rettangolo selezionato (mouseover).

Posso assegnare l'id a rects, ma non per il testo. Codice:

 svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
      .attr("id", function(d){ 
       return d.slug;  // slug = label downcased, this works 
      });      // each rect has unique id 

Tuttavia, codice simile per il mio elemento di testo sull'asse x non assegnare un id ?!

svg.append("g") 
     .call(xAxis) 
     .selectAll("text") 
     .attr("id", function (d){ // inspect text element shows no ID. 
      return d.slug;   // text doesn't have any id 
     }) 
    .style("text-anchor", "end") 
    .attr("opacity", 0.2); 

Come posso assegnare un ID univoco ai miei elementi di testo nell'asse x? Grazie!

Answer 1

Il problema è che nessun dato è associato ai segni di spunta sull'asse x e pertanto d non è definito: si dovrebbe ricevere un messaggio di errore durante l'esecuzione del codice.

In questo caso particolare, è possibile utilizzare l'indice per ottenere l'elemento di dati pertinenti in questo modo.

svg.append("g").call(xAxis) 
    .selectAll("text") 
    .attr("id", function(d, i) { return dataset[i].slug; }); 

noti che questo funziona solo se il numero di assi zecche è uguale al numero di elementi di dati.