title: how to assign unique id to SVG text element in d3 javascript
body: <p>Making a bar graph in d3.  I have 30+ bars, with 30+ corresponding labels on x-axis.  I would like x-axis labels to be hidden when the page loads (this is working), AND APPEAR only if user cursors over the corresponding bar (svg rect object).  To do this I am assigning an id to each rect and each text element.  When user cursors over rect, text will appear for ONLY the selected (mouseover'd) rect.</p>
  
  <p>I can assign id to rects, but not for text.  Code: </p>
  
  <pre><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
  </code></pre>
  
  <p>However, similar code for my text element on x-axis doesn't assign an id?! </p>
  
  <pre><code>    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);
  </code></pre>
  
  <p>How can I assign a unique id to my text elements in x-axis?  Thank you!</p>