score:5

The problem here is that you're setting exactly the same value for both updateDelay and transitionDelay. Because of that, you're calling a transition before the previous one ends, which effectively cancels the current transition.

The simple and naive solution is increasing updateDelay a little bit. For instance, 50 milliseconds more:

<html>
<head>
    <title>Test</title>
    <script src="https://d3js.org/d3.v5.js"></script>
    <style>
        path {
            stroke: steelblue;
            stroke-width: 1;
            fill: none;
        }
    </style>
</head>
<body>

<p>
    <b>Size:</b> 300x30 &nbsp;&nbsp;<b>Interpolation:</b> basis &nbsp;&nbsp;<b>Animation:</b> true &nbsp;&nbsp;<b>Transition:</b>
    1000ms &nbsp;&nbsp;<b>Update Frequency:</b> 1000ms
<div id="graph1" class="aGraph" style="width:300px; height:30px;"></div>
</p>
<script>

    function displayGraphExample(id, width, height, updateDelay, transitionDelay) {
        var graph = d3.select(id)
            .append("svg:svg")
            .attr("width", "100%")
            .attr("height", "100%");
        var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
        var x = d3.scaleLinear().domain([0, d3.max(data) * 5]).range([-5, width]);
        var y = d3.scaleLinear().domain([0, 10]).range([0, height]);
        var line = d3.line()
            .x(function (d, i) {
                return x(i);
            })
            .y(function (d) {
                return y(d);
            })
            .curve(d3.curveBasis);
        graph.append("svg:path").attr("d", line(data));
        function redrawWithAnimation() {
            graph.selectAll("path")
                .data([data])
                .attr("transform", "translate(" + x(1) + ")")
                .attr("d", line) 
                .transition() 
                .ease(d3.easeLinear)
                .duration(transitionDelay)
                .attr("transform", "translate(" + x(0) + ")");
        }
        d3.interval(function() {
           var v = data.shift(); 
           data.push(v); 
        	   redrawWithAnimation();
        }, updateDelay);
    }

    displayGraphExample("#graph1", 300, 30, 1050, 1000);
</script>

</body>
</html>

However, that's not the best approach: the idiomatic solution here is calling a new transition when the last one ends. For instance:

.on("end", function() {
    var v = data.shift();
    data.push(v);
    redrawWithAnimation();
});

That way we don't need to guess or play around with magic numbers and values, which can go wrong: the transition itself call whatever function you want when it finishes.

Here is the demo:

<html>

<head>
  <title>Test</title>
  <script src="https://d3js.org/d3.v5.js"></script>
  <style>
    path {
      stroke: steelblue;
      stroke-width: 1;
      fill: none;
    }
  </style>
</head>

<body>

  <p>
    <b>Size:</b> 300x30 &nbsp;&nbsp;<b>Interpolation:</b> basis &nbsp;&nbsp;<b>Animation:</b> true &nbsp;&nbsp;<b>Transition:</b> 1000ms &nbsp;&nbsp;<b>Update Frequency:</b> 1000ms
    <div id="graph1" class="aGraph" style="width:300px; height:30px;"></div>
  </p>
  <script>
    function displayGraphExample(id, width, height, updateDelay, transitionDelay) {
      var graph = d3.select(id)
        .append("svg:svg")
        .attr("width", "100%")
        .attr("height", "100%");
      var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
      var x = d3.scaleLinear().domain([0, d3.max(data) * 5]).range([-5, width]);
      var y = d3.scaleLinear().domain([0, 10]).range([0, height]);
      var line = d3.line()
        .x(function(d, i) {
          return x(i);
        })
        .y(function(d) {
          return y(d);
        })
        .curve(d3.curveBasis);
      graph.append("svg:path").attr("d", line(data));
      redrawWithAnimation();

      function redrawWithAnimation() {
        graph.selectAll("path")
          .data([data])
          .attr("transform", "translate(" + x(1) + ")")
          .attr("d", line)
          .transition()
          .ease(d3.easeLinear)
          .duration(transitionDelay)
          .attr("transform", "translate(" + x(0) + ")")
          .on("end", function() {
            var v = data.shift();
            data.push(v);
            redrawWithAnimation();
          })
      }
    }

    displayGraphExample("#graph1", 300, 30, 1050, 1000);
  </script>

</body>

</html>


Related Query

More Query from same tag