d3 enter().append() not appending all elements of my array

Question

I'm working on my first mid-scale d3 project right now after having run through the tutorials. I understand scales, enter, update, and exit, so I'm pretty confused about a problem I'm running into.

I have an array of JSON objects with two fields, year and number . I am creating a bar chart with this array with the following code:

var bar = chart.selectAll('g')
    .data(yearData)
  .enter().append('g')
    .attr('transform', function(d, i) {
      console.log(i);
      return 'translate(' + i * barWidth + ',0)'; });

My confusion stems from the fact that the console.log statement in this code block outputs 27 as its first value. In other words, d3 is skipping elements 0 - 26 of my array. Why could this be??

Thanks for your help.

Answer 1

This is most likely because you already have g elements on your page (eg from adding an axis). These are selected and matched with data, so the enter selection doesn't contain everything you expect.

One solution is to assign a class to these elements and select accordingly:

var bar = chart.selectAll('g.bar')
 .data(yearData)
 .enter().append('g')
 .attr("class", "bar")
 // ...

Much more detail on this in the second half of this tutorial .