score:0

Accepted answer

This is bizarre, your code should work. It's like d3 is not picking up the transition.attr and applying it. Your best option may be to set up your own interpolater: 

var startTrans = 'translate(0,0)';
var endTrans = 'translate(' + (-x(duration)) + ',0)';
var transInterp = d3.interpolateString(startTrans , endTrans); 
...
path 
  .attr("d", valueline1(data1))
  .attr("transform", null)
  .transition()
  .duration(moveDuration)
  .ease("linear")
  .attrTween('transform', function (d) {
    return transInterp;
  });

Full working code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg {
    font: 10px sans-serif;
  }
  
  .line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
</style>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <div id="graph1"></div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
  
    var margin = {
        top: 5,
        right: 10,
        bottom: 10,
        left: 70
      },
      width = 600 - margin.left - margin.right,
      height = 250 - margin.top - margin.bottom;

    var data1;
    var x, y1, xAxis1, yAxis1, update;
    var duration = 1000;
    var moveDuration = 1000;
    // Parse the date / time
    var totalSeconds = 60;
    var n = 10; //totalSeconds;
    var limit = n;
    duration = 1000;
    x = d3.time.scale()
      .domain([0, ((n - 1) * duration)])
      .range([0, width]);
    var valueline1 = d3.svg.line()
      .x(function(d, i) {
        return x(i * duration);
      })
      .y(function(d, i) {
        return y1(d);
      })
      .interpolate("monotone");

    // Set the ranges
    data1 = [0];


    y1 = d3.scale.linear().range([height, 0])
      .domain([0, 1000]);
    xAxis1 = d3.svg.axis().scale(x)
      .orient("bottom")
      .ticks(d3.time.seconds, 1.0)
      .tickFormat(d3.time.format('%M:%S'))
      .innerTickSize(-height);
    yAxis1 = d3.svg.axis().scale(y1)
      .innerTickSize(-width)
      .outerTickSize(0)
      .tickPadding(10)
      .orient("left").ticks(10);
    var svg = d3.select("#graph1")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    svg.append("defs").append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", width)
      .attr("height", height);

    var xAxisLine = svg.append("g") // Add the X Axis
      .attr("class", "x axis")
      .attr("transform", "translate(" + width + "," + height + ")")
      .call(xAxis1);

    svg.append("g") // Add the Y Axis
      .attr("class", "y axis")
      .call(yAxis1);

    var path = svg.append("g")
      .attr("clip-path", "url(#clip)")
      .append("path")
      .data(data1)
      .attr("class", "line")
      .attr("transform", "translate(" + (width) + ")")
      .attr("d", valueline1(data1)); // Add the valueline path.


    var random = d3.random.normal(0, 50);
    var i = 0;
    var shifter = 0;
    var startTrans = 'translate(0,0)';
    var endTrans = 'translate(' + (-x(duration)) + ',0)';
    var transInterp = d3.interpolateString(startTrans, endTrans);

    function update(val) {
      var svg1 = d3.select("#graph1");
      i = i + 1;
      shifter = 0;
      var val = JSON.parse(val);
      data1.push(val);

      if (i >= limit) {
        shifter = x(-duration);
        var x_axis_scale = d3.time.scale()
          .domain([(i + 1 - limit) * duration, ((n - 1 + (i + 1 - limit)) * duration)])
          .range([0, width]);

        svg1.select(".x.axis")
          .attr("transition", null)
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .call(d3.svg.axis().scale(x_axis_scale)
            .orient("bottom")
            .ticks(d3.time.seconds, 1.0)
            .tickFormat(d3.time.format('%M:%S'))
            .innerTickSize(-height)
            //.orient("bottom")
            //.ticks(d3.time.seconds,1.0)
            //.tickFormat(d3.time.format('%M:%S'))
            //.innerTickSize(-height)
          );

        
        path 
          .attr("d", valueline1(data1))
          .attr("transform", null)
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .attrTween('transform', function (d) {
            return transInterp;
          });

        data1.shift();
        // Make the changes
      } else {
        shifter = width - x(i * duration);
        svg1.select(".x.axis")

        .transition()
          .duration(moveDuration)
          .ease("linear")
          .attr("transform", "translate(" + (shifter) + "," + (height) + ")");

        //	svg1.select(".line")   // change the line
        path.attr("d", valueline1(data1))
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .attr("transform", "translate(" + (shifter) + ")"); //.attr("transform","translate("+(shifter)+")");

        // Make the changes
      }

    }

    setInterval(function() {
      update(Math.random() * 1000);
    }, 1000);
  </script>


Related Query

More Query from same tag