Change x scale of path dynamically d3.js

I am trying to change the x-scale of already plotted path in d3.js

Also, i am able to change the x-scale of circles using following 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); })

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.

Now i also want to change the path with this new scale.

Here is the code when my path first plotted.

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");