generate a continue movement in line plot

[Maitep]

He everyone!

I create a line plot using d3, the line moves every second  and even the xAxis move to the left.. but I want a smooth and permanent movement, line the last example that appears here

my  code for the line and Xaxis is like this

    var x = d3.time.scale()
        .domain([min_date, max_date])
        .range([0, width]);
   
   var  xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);

    var axis = graph.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    var line = d3.svg.line()
        .interpolate("basis")
        .x(function(d, i) {
          return x(new Date(d.ts));
        })
        .y(function(d, i) {
          return y(d.volume);
        });

      var path = graph.append("g")
        .append("path")
        .data([groups[sensor[i]]['data']])
        .attr("class", "line")
        .attr("d", line)
        .attr("transform", null)
        .transition()
          .attr("transform", "translate(" + x(-1) + ")")
        .style("stroke", function(d, i) {
            return d[i].color;
        });

This creates the line with 60 points the first time, after that, I call the same function each second

    setInterval(function () {
       tick();
    }, 1000)

In this function, I add the new value to my object and remove the first

groups[key]['data'].push(value)
groups[key]['data'].shift();

and show this point in the plot

    var x = d3.time.scale()
        .domain([small_date, big_date])
        .range([0, width]);
   
    var y = d3.scale.linear()
        .domain([0, 20])
        .range([height, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    svg.selectAll("g .x.axis").transition()
      .duration(500)
      .ease("linear")
      .call(xAxis);

    var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) { return x(new Date(d.ts)); })
      .y(function(d) { return y(d.volume); });

    svg.selectAll("g path.line")
    .data(processedData).transition().duration(0)
      .ease("linear")
      .attr("d", function(d, i) {
        return line(d.data);
      })
      .attr("transform", null);

 Everything works fine but I don't find how to applicate the smooth movement to the line and the xAxis  (the small stop that I have every second) see the video of my plot