This is because there are a lot of g elements on the page already when you run this code -- some of them added by you, some of them added by D3 when you call the axis component. There are however no rect elements, so that code works.

There are several ways around this -- you can either run the code that binds the data to the g elements first, add axis and chart in separate g elements, add a class to the g elements that you're binding the data to, or any combination of these.

Some more background and examples in this tutorial.


not sure what you want, but:

if you want something like:

  g //one g for every data row
  g //y axis
  g //x axis

then something like this should work:

var chart  = svg
var chartLines = chart
 .attr("transform", "translate(" + margin.left + "," + + ")")
 .attr("class", "line");

// setup chart axis.
          .attr("class", "x axis")

          .attr("class", "y axis")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")

// Pertinent code here    
var rows = chart.selectAll(".line").data(data).enter().append("g");

Related Query

More Query from same tag