title: D3.js adding to a Multi-Linegraph path and updating axis
body: <p>Im currently having a problem with updating my linegraph paths and axis in d3.js</p>
  
  <p>What I would like to happen is, when new data is entered (preferably via a websocket, but at the minute through a simple button click) the line extends to the new point of the graph and, if needed, the axis adjusts to facilitate the new sales value.</p>
  
  <p>The test data I'm using to try this is as follows:</p>
  
  <p>Client : XYZ
  sales: 400
  Time: 17:00</p>
  
  <p>Which should be entered in their respective fields on the web form.</p>
  
  <p>I've tried a few different methods but I'm still quite new to d3.js and I'm not sure if i'm selecting or binding data in the correct way, and my axis don't seem to update either.</p>
  
  <p>Preferably, I would also like this code to work for all lines on the graph concurrently, so if the web form is paired with a database, it will update all the lines simultaneously at set intervals.</p>
  
  <p>Any suggestions? It would be greatly appreciated.</p>
  
  <p>jsfiddle of current build: <a href="https://jsfiddle.net/2bqzuue3/1/" rel="nofollow">https://jsfiddle.net/2bqzuue3/1/</a></p>
  
  <p>Code for Button click event:</p>
  
  <pre><code>d3.select("button")
          .attr("id","submit")
          .on("click", function(d){
              var newClient = document.getElementById("client").value;
              var newSale = document.getElementById("sale").value;
              var newtime = document.getElementById("time").value;
  
  
  
              var update = {
                  "Client" : newClient,
                  "sale": newSale,
                  "time": newtime
              };
  
              data.push(update);
  
              dataGroup = d3.nest()
                      .key(function(d){
                          return d.Client; //Decides which property (i.e key) to sort your data with
                                           //Useful for multiple lines on one graph
                      })
                      .entries(data);
  
              xScale = d3.time.scale()
                      .domain([d3.min(data, function(d){return parseTime(d.time);}),d3.max(data, function(d){return parseTime(d.time);})])
  
              yScale = d3.scale.linear()
                      .domain([d3.min(data, function(d){return d.sale;}) , d3.max(data, function(d){return d.sale;})]);
  
              vis.select(".x.axis")
                  .transition()
                  .duration(1000)
                  .call(xAxis);
  
              vis.select(".y.axis")
                  .transition()
                  .duration(1000)
                  .call(yAxis);
  
              lineGen = d3.svg.line()
                  .x(function(d){
                      return xScale(parseTime(d.time));
                  })
                  .y(function(d){
                      return yScale(d.sale);
                  })
                  .interpolate("monotone");
  
              vis.selectAll("path")
                  .data(dataGroup)
                  .enter()
                  .append("svg:path")
                  .attr("d", lineGen(dataGroup.values))
                  .transition()
                  .duration(1000);
  
  
  
  
      });
  </code></pre>
  
  <p>*NOTE: you need to scroll down to see the text fields to enter test data in jsfiddle.</p>