Accepted answer

The default position of any g is (0, 0) and .orient('left') means that the axis is placed to the left of (0, 0), which is outside the scene. You need to manually set the transform on the g element which contains the axis:

  .attr('class', 'y axis')
  .attr('transform', 'translate(' + [margins.left,] + ')');


I'd look closer at some of the tried and true examples.

With the recommended form you are missing a "drawing area" g element.

// have an SVG that is the drawing area width/height plus margins
// you don't show your mark-up but it looks like your code is ok 

// append a `g` element and translate it to your margins
// you'll do all your drawing to the g element
svg = svg.append("g")
  .attr("transform", "translate(" + margins.left + "," + + ")");

// append axis to this g
// your y-axis will be in the margin, so adjust margins.left to fit
  .attr("class", "y axis")

Related Query

More Query from same tag