title: Change x scale of path dynamically d3.js
body: <p>I am trying to change the x-scale of already plotted path in d3.js</p>
  
  <p>Also, i am able to change the x-scale of circles using following code.</p>
  
  <pre><code>var s = d3.event.selection || xTimeScale.range();
  
                      xTimeScale.domain(s.map(xDateScale.invert, xDateScale));
  
                  d3.selectAll(".dot").transition().duration(10).attr("cx",function(d){ return xTimeScale(d.date); })
  </code></pre>
  
  <p>As you can see i have changed the domain of xTimeScale with new values. and then select all the circles with class(.dot) and replot the x and y with changed xTimeScale.</p>
  
  <p>Now i also want to change the path with this new scale.</p>
  
  <p>Here is the code when my path first plotted.</p>
  
  <pre><code>var lineFunction = d3.line().x(function(d) { return x(d.date); }).y(function(d) { return y(d.value); })
  
                      var lineGraph = svg.append("path").attr("d",lineFunction(data)).attr("stroke", "blue")
                          .attr("stroke-width", 2).attr("fill", "none").attr("class","dotsLine");
  </code></pre>