title: Y-axis created but invisible
body: <p>I have create a simple barchart with <code>D3.js</code> with the following code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Bar Transition Example&lt;/title&gt;
      &lt;script type="text/javascript" src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var margin = {top: 20, right: 20, bottom: 30, left: 60},
      width = 300 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5);
  
  data = [{"label":"apples","value":6000},{"label":"pears","value":5000},{"label":"bananas","value":4000}]
  
  
  function bars(data)
  {
  
      x.domain(data.map(function(d) { return d.label; }));
      y.domain([0, d3.max(data, function(d) { return d.value; })]);
  
      d3.select("svg").append('g')
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
      d3.select("svg").append('g')
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".90em")
      .style("text-anchor", "end");
  
     bars = d3.select("svg").selectAll(".bar")
      .data(data)
  
      //enter
      bars.enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.label); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });
  
  }
  
  
  function init()
  {
  
      //setup the svg
      var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      bars(data)
  }
  
  init();
      &lt;/script&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Yet my Y axis doesn't visualise as I would expect. Indeed,
   the Y axis is created
  <img src="https://i.stack.imgur.com/mvftO.png" alt="enter image description here"></p>
  
  <p>I tried tweaking all the parameters (including the margin variables     </p>
  
  <pre><code>var margin = {top: 20, right: 20, bottom: 30, left: 60},
          width = 300 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;
  </code></pre>
  
  <p>but with no effect.</p>