title: Set y-axis of d3 chart to fit widest label?
body: <p>I'm drawing line charts with d3 and it all works fine. However, I have to leave enough margin on the left of the chart area to fit whatever I think might be the widest y-axis text label. I'd like to adjust this space for each chart, depending on the widest label.</p>
  
  <p>Initially I thought I could find the maximum y value, create a hidden text object, work out how wide that is, and use that value for the left margin when creating the chart. A bit nasty, but it gets me a value.</p>
  
  <p>However, if the maximum y value is, say "1598.538" the top-most y-axis label might be "1500"... ie, a lot narrower.</p>
  
  <p>So I guess I want to find the width of whatever will actually be the top-most label. But I can't think how to do that without drawing the chart and axis, measuring that width, and drawing it again for real. Which sounds nasty! Is there a non-nasty way to do this?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here's part of my code, using Lars' suggestion, just to show where it fits in:</p>
  
  <pre class="lang-js prettyprint-override"><code>// I did have
  // `.attr("transform", "translate(" + margin.left + "," + margin.top ")")`
  // on the end of this line, but I've now moved that to the bottom.
  var g = svg.select("g");
  
  // Add line paths.
  g.selectAll(".line").data(data)
      .enter()
      .append("path")
      .attr("d", line);
  
  // Update the previously-created axes.
  g.select(".axis-x")
      .attr("transform", "translate(0," + yScale.range()[0] + ")"))
      .call(xAxis);
  g.select(".axis-y")
      .call(yAxis);
  
  // Lars's suggestion for finding the maximum width of a y-axis label:
  var maxw = 0;
  d3.select(this).select('.axis-y').selectAll('text').each(function(){
    if (this.getBBox().width &gt; maxw) maxw = this.getBBox().width;
  });
  
  // Now update inner dimensions of the chart.
  g.attr("transform", "translate(" + (maxw + margin.left) + "," + margin.top + ")");
  </code></pre>