title: d3 axis label cut off in chrome and firefox
body: <p>I've created a scatter plot in d3.  The problem is that the y axis label does not appear in firefox and chrome (works fine in IE).  I've tried doing things like making the svg width 100%, but for some reason the label always gets cut off.</p>
  
  <pre><code>&lt;div id="TimeSeriesChartDiv" style="display: inline; float: right; width: 650px;
                              height: 415px"&gt;
                          &lt;/div&gt;
  
   //Width and height
          var w = 600;
          var h = 300;
          var padding = 30;
          var margin = { top: 20, right: 20, bottom: 30, left: 20 };
          var df = d3.time.format("%b-%y");
  
  
          //Create scale functions
          var xScale = d3.time.scale()
                              .domain([d3.min(dataset, function (d) { return d[0]; }), d3.max(dataset, function (d) { return d[0]; })])
                              .range([padding, w - padding * 2])
                              .nice(5);
  
          var yScale = d3.scale.linear()
                               .domain([0, d3.max(dataset, function (d) { return d[1]; })])
                               .range([h - padding, padding]);
   //Define X axis
          var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(5)
                            .tickFormat(df);
  
          //Define Y axis
          var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .ticks(5);
  
          //Create SVG element
          var svg = d3.select("#TimeSeriesChartDiv")
                      .append("svg")
                      .attr("width", w + margin.left + margin.right)
                      .attr("height", h + margin.top + margin.bottom);
  
  //Create X axis
          svg.append("g")
              .attr("class", "axis")
              .attr("transform", "translate(20," + (h - padding) + ")")
              .call(xAxis);
  
          //Create Y axis
          svg.append("g")
              .attr("class", "axis")
              .attr("transform", "translate(" + 50 + ",0)")
              .call(yAxis);
  
          svg.append("text")
          .attr("class", "axislabel")
           .attr("text-anchor", "end")
           .attr("x", w / 2)
           .attr("y", h + 8)
           .text("Date");
  
          svg.append("text")//--&gt;&gt;this is the text that gets cut off
          .attr("class", "axislabel")
          .attr("text-anchor", "end")
          .attr("x", -100)
          .attr("y", -15)
          //.attr("dy", ".75em")
          .attr("transform", "rotate(-90)")
          .text(unit);
  </code></pre>
  
  <p>Any ideas would be much appreciated.  Thanks</p>