Wie man eine eindeutige ID dem SVG-Textelement in d3 zuweisen javascript

Question

Erstellen eines Balkendiagramms in d3. Ich habe 30+ Balken, mit 30+ entsprechenden Beschriftungen auf der X-Achse. Ich möchte, dass x-Achsenbeschriftungen ausgeblendet werden, wenn die Seite geladen wird (das funktioniert), und APPEAR nur dann, wenn der Benutzer den entsprechenden Balken überspannt (svg rect object). Dazu weise ich jedem rect und jedem Textelement eine ID zu. Wenn der Benutzer den Cursor über rect bewegt, erscheint der Text NUR für die ausgewählte (mouseover) rect.

Ich kann IDs zuweisen, aber nicht für Text. Code:

 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 

Ähnliche Code für mein Textelement auf X-Achse weist jedoch keine 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); 

Wie kann ich meinen Textelementen auf der x-Achse eine eindeutige ID zuweisen? Vielen Dank!

Answer 1

Das Problem ist, dass keine Daten an die X-Achsen-Ticks gebunden sind und daher d nicht definiert ist - Sie sollten tatsächlich eine Fehlermeldung erhalten, wenn Sie Ihren Code ausführen.

In diesem speziellen Fall können Sie den Index verwenden, um das entsprechende Datenelement wie folgt zu erhalten.

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

Beachten Sie, dass dies nur dann, wenn die Anzahl der Achse arbeitet Zecken ist das gleiche wie die Anzahl von Datenelementen.