how to assign unique id to SVG text element in d3 javascript

Question

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 o

Answer 1

The problem is that no data is bound to the x axis ticks and therefore d is undefined -- you should actually get an error message when running your code.

In this particular case, you can use the index to get the relevant data item like so.

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

Note that this will only work if the number of axis ticks is the same as the number of data items.