title: D3 line graph not filling entire svg width
body: <p>As the title states, I have created a D3 line/area graph, and I am finding it difficult to get the graph's width to remain constant, depending on the amount of data I have given it to render, it scales the width of the graph accordingly, but I am unsure of how I can get it to remain at a constant width, regardless of the amount of data given, which is what I would like to achieve. </p>
  
  <p>I imagine it has something to do with the scaling of the x and y coordinates, but I am stuck at the moment and can't seem to figure out why it is doing this.</p>
  
  <p>Here is the code I have thus far,</p>
  
  <pre><code>  //dimensions and margins
    var width = 625,
    height = 350,
    margin = 5,
  
    // get the svg and set it's width/height
    svg = d3.select("#main")
      .attr("width", width)
      .attr("height", height);
  
    //initialize the graph
    init([
          [12345,42345,32345,22345,72345,62345,32345,92345,52345,22345], 
          [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] 
        ]);
  
    $("button").live('click', function(){
        var id = $(this).attr("id");
        if(id == "one"){
          updateGraph([
                  [52345,32345,12345,22345,62345,72345,92345,32345,22345,22345,52345,32345,12345,22345,62345,72345,92345,32345,22345,22345,52345,32345,12345,22345,62345,72345,92345,32345,22345,22345], 
                  [4234,12345,2234,32345,6234,7234,9234,3234,2234,2234,4234,1234,2234,3234,6234,7234,9234,3234,2234,2234,4234,1234,2234,3234,6234,7234,9234,3234,2234,2234] 
                ]);
        }else if(id == "two"){
          updateGraph([
                [12345,42345,32345,22345,72345,62345,32345,92345,52345,22345,12345,42345,32345,22345,72345,62345,32345,92345,52345,22345,12345,42345,32345,22345,72345], 
                [1234,2345,3234,2234,7234,6234,3234,9234,5234,2234,1234,4234,3234,2234,7234,6234,3234,9234,5234,2234,1234,4234,3234,2234,7234] 
              ]);
        }
  
    });
  
  function init(data){
  
    var x = d3.scale.linear()
      .domain([0,data[0].length])
      .range([margin, width-margin]),
  
    y = d3.scale.linear()
      .domain([0,d3.max(data[0])])
      .range([height-margin, margin]),
  
    /* line path generator */
    line = d3.svg.line().interpolate('monotone')
      .x(function(d,i) { return x(i); })
      .y(function(d) { return y(d); }),
  
    /* area path generator */
    area = d3.svg.area().interpolate('monotone')
      .x(line.x())
      .y1(line.y())
      .y0(y(0)),
  
    groups = svg.selectAll("g")
      .data(data)
      .enter()
      .append("g");
  
    svg.select("g")
      .selectAll("circle")
    .data(data[0])
    .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("cx", line.x())
      .attr("cy", line.y())
      .attr("r", 4);
  
    /* add the areas */
    groups.append("path")
      .attr("class", "area")
      .attr("d",area)
      .style("fill", function(d,i) { return (i == 0 ? "steelblue" : "red" ); });
  
    /* add the lines */
    groups.append("path")
      .attr("class", "line")
      .attr("d", line);
  }
  
  function updateGraph(data){
  
    var x = d3.scale.linear()
      .domain([0,data[0].length])
      .range([margin, width-margin]),
  
    y = d3.scale.linear()
      .domain([0,d3.max(data[0])])
      .range([height-margin, margin]),
  
    /* line path generator */
    line = d3.svg.line().interpolate('monotone')
      .x(function(d,i) { return x(i); })
      .y(function(d) { return y(d); }),
  
    /* area path generator */
    area = d3.svg.area().interpolate('monotone')
      .x(line.x())
      .y1(line.y())
      .y0(y(0));
  
    groups = svg.selectAll("g")
      .data(data),
  
    circles = svg.select("g")
      .selectAll("circle");
  
    circles.data(data[0])
        .exit().remove();
  
    circles.data(data[0])
      .enter().append("circle")
          .attr("class", "dot")
          .attr("cx", line.x())
          .attr("cy", line.y())
          .attr("r", 4);
  
    /* animate circles */
    circles.data(data[0])
      .transition()
      .duration(1000)
      .attr("cx", line.x())
      .attr("cy", line.y());
  
    /* animate the lines */
    groups.select('.line')
      .transition()
      .duration(1000)
      .attr("d",line);
  
    /* animate the areas */
    groups.select('.area')
      .transition()
      .duration(1000)
      .attr("d",area);
  
  }
  </code></pre>
  
  <p>​</p>
  
  <p>As well as a fiddle <a href="http://jsfiddle.net/JL33M/" rel="nofollow">http://jsfiddle.net/JL33M/</a></p>
  
  <p>Thank you!</p>