d3.js - d3.data skipping the first row of data

Question

I have the following code that works great, except when I iterate through my data set, the first row (the 0 index) is getting skipped.

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x",function(d){
    console.log(data);
    console.log(d);
    return xScale(d.year-1980);
  })

Note the console.log(data) returns my full data set, including the first row so the data is there!

But console.log(d) shows all rows after and including my second row of data - it drops the first row.

Any suggestions are welcome.

Answer 1

I had the same issue with similar code, and fixed it based on Lars Kothoff's comment.

In my case it made sense to change the selectAll to work on a g element, more like so:

svg.selectAll("g")
    .data(data);
    .enter()
    .append("g")
    .append("rect")
    .attr("x",function(d) { return xScale(d.year-1980); });

You could also differentiate the rects with a class:

svg.selectAll("rect.year")
    .data(data)
    .enter()
    .append("rect")
    .attr("x",function(d){ return xScale(d.year-1980); })
    .classed("year");