title: Y axis labels are cut off on D3 plot
body: <p>I have this multi-line plot with D3:</p>
  
  <p><a href="https://i.stack.imgur.com/ZlgaH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZlgaH.png" alt="enter image description here"></a></p>
  
  <p>But as you can see, the beginning of the y-axis labels are cut off - anybody know how I can properly display the full label?</p>
  
  <p>And if you have any advice on how to rotate the x-axis labels by 90 degrees, that would help too. </p>
  
  <p>Here is the complete code which generates the plot:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en'&gt;
  
  &lt;head&gt;
  
    &lt;link href='http://getbootstrap.com/dist/css/bootstrap.min.css' rel='stylesheet'&gt;
    &lt;link href='http://getbootstrap.com/examples/justified-nav/justified-nav.css' rel='stylesheet'&gt;
    &lt;script src='http://d3js.org/d3.v3.min.js' charset='utf-8'&gt;&lt;/script&gt;
  
    &lt;style&gt;
  
      .axis path {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges;
      }
  
      .axis text {
        font-family: Lato;
        font-size: 13px;
      }
  
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class='container'&gt;
  
    &lt;div class='jumbotron'&gt;
  
      &lt;svg id='visualisation'&gt;&lt;/svg&gt;
  
      &lt;script&gt;
  
        var heapTotal = JSON.parse('[{"x":1501478175044,"y":18911232},{"x":1501478177048,"y":19959808}]');
        var heapUsed = JSON.parse('[{"x":1501478175044,"y":10492112},{"x":1501478177048,"y":10904080}]');
        var rss = JSON.parse('[{"x":1501478175044,"y":35622912},{"x":1501478177048,"y":36134912}]');
  
        const values = heapTotal.concat(heapUsed).concat(rss).reduce(function (prev, curr) {
  
          console.log('curr =&gt; ', curr);
  
          return {
            xMin: Math.min(prev.xMin, curr.x),
            xMax: Math.max(prev.xMax, curr.x),
            yMin: Math.min(prev.yMin, curr.y),
            yMax: Math.max(prev.yMax, curr.y),
          }
  
        }, {
          xMin: Number.MAX_SAFE_INTEGER,
          xMax: -1,
          yMin: Number.MAX_SAFE_INTEGER,
          yMax: -1
        });
  
        console.log('values =&gt; ', values);
  
        var vis = d3.select('#visualisation'),
          WIDTH = 1200,
          HEIGHT = 800,
          MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
          },
          xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([values.xMin - 50, values.xMax + 50]),
          yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([values.yMin - 50, values.yMax + 50]),
          xAxis = d3.svg.axis()
          .scale(xScale),
          yAxis = d3.svg.axis()
          .scale(yScale)
          .orient('left');
  
        vis.attr("width", WIDTH)
        .attr("height", HEIGHT);
  
        vis.append('svg:g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
        .call(xAxis);
  
        vis.append('svg:g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
        .call(yAxis);
  
        var lineGen = d3.svg.line()
        .x(function (d) {
          return xScale(d.x);
        })
        .y(function (d) {
          return yScale(d.y);
        })
        .interpolate('basis');
  
        vis.append('svg:path')
        .attr('d', lineGen(heapUsed))
        .attr('stroke', 'green')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
  
        vis.append('svg:path')
        .attr('d', lineGen(heapTotal))
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
  
        vis.append('svg:path')
        .attr('d', lineGen(rss))
        .attr('stroke', 'red')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
  
  
      &lt;/script&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>