title: Overlapping Axis Ticks with Margin
body: <p>My X-Axis tick number is scaling to the full width of the svg and not just the graph (without the margin area), so it overlaps.</p>
  
  <p><a href="http://i.stack.imgur.com/SHiIj.png" rel="nofollow">http://i.stack.imgur.com/SHiIj.png</a> The top image has margin so the labels are shown, the bottom one shows that with no margin, the ticks appear correctly</p>
  
  <p>How can I make the X-axis ticks scale to the graph width instead of the svg width?</p>
  
  <pre><code>var margin = {top: 10, right: 0, bottom: 50, left: 0},
   width = windowWidth * 0.28 - margin.left - margin.right,
   height = 150 - margin.top - margin.bottom;
  
  var x = d3.time.scale()
   .range([0, width]);
  
  var y = d3.scale.linear()
   .range([height, 0]);
  
  var color = d3.scale.category10();
  
  var xAxis = d3.svg.axis()
   .scale(x)
   .orient("bottom")
   .ticks(4);
  
  var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .ticks(4);
  
  var line = d3.svg.line()
   .interpolate("basis")
   .x(function(d) { return x(d.date); })
   .y(function(d) { return y(d.trials); });
  
  var svg = d3.select("#data-graph").insert("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var masterLabelList = ['Total','Completed']
  
  d3.tsv("/static/data.tsv" + '?time=' + new Date().getTime(), function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
  
    data.forEach(function(d) {
      d.date = new Date(+d.date);
    });
  
    var category = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.date, trials: +d[name]};
        })
      };
    });
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
  
    y.domain([
      d3.min(category, function(c) { return d3.min(c.values, function(v) { return v.trials; }); }),
      d3.max(category, function(c) { return d3.max(c.values, function(v) { return v.trials; }); })
      ]);
  
    svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .style("fill", "#999999")
     .call(xAxis);
  </code></pre>