score:1

The problem is caused by the fact that tick is called immediately and synchronously at the end of the transition. The CPU process executing the JavaScript remains busy updating data and chart, and is not available to do anything else on this tab.

One way to fix this is to use Window.requestAnimationFrame().

.on('end', () => {
    requestAnimationFrame(tick)
})

The updated snippet below shows this solution in action.

It does not fix other issues not mentioned in the question, like the fact that no data is shown in the chart.

<!DOCTYPE html>

<head></head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js">
    
  </script>
  <script>
    var t = -1;
    var n = 40;
    var duration = 750;

    var data = [];

    console.log('hello');
    function next() {
      return {
        time: ++t,
        value: Math.random() * 10
      }
    }

    var margin = {
        top: 6,
        right: 0,
        bottom: 20,
        left: 40
      },
      width = 560 - margin.right,
      height = 120 - margin.top - margin.bottom;

    var xScale = d3.scaleTime()
      .domain([t - n + 1, t])
      .range([0, width]);

    var yScale = d3.scaleLinear()
      .domain([0, 10])
      .range([height, 0]);

    var line = d3.line()
      .x((d) => xScale(d.time))
      .y((d) => yScale(d.value));

    var svg = d3.select('body').append('p').append('svg');

    var chartArea = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

    chartArea.append('defs').append('clipPath')
      .attr('id', 'clip2')
      .append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', width)
      .attr('height', height);

    chartArea.append('rect')
      .attr('class', 'bg')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', this.chartWidth)
      .attr('height', this.chartHeight);

    var xAxis = d3.axisBottom(xScale);
    var xAxisG = chartArea.append('g')
      .attr('class', 'x-axis')
      .attr('transform', `translate(0, ${height})`);

    xAxisG.call(xAxis);

    d3.selectAll('x-axis path').style('stroke', 'red')
      .style('stroke-width', 2);

    var yAxis = d3.axisLeft(yScale);
    var yAxisG = chartArea.append('g').attr('class', 'y-axis');
    yAxisG.call(yAxis);

    var grids = chartArea.append('g')
      .attr('class', 'grid')
      .call(d3.axisLeft(yScale).tickSize(-(width)).tickFormat((domain, number) => {
        return ""
      }));

    var pathsG = chartArea.append('g')
      .attr('id', 'paths')
      .attr('class', 'paths')
      .attr('clip-path', 'url(#clip2)');

    tick();

    function tick() {
      console.log('working');
      var newValue = {
        time: ++t,
        value: Math.random() * 10
      };

      data.push(newValue);

      xScale.domain([newValue.time - n + 2]);

      xAxisG.transition().duration(500).ease().call(xAxis);
      console.log('is it?');


      var minerG = pathsG.selectAll('.minerLine').data([data]);
      var minerGEnter = minerG.enter()
        .append('g')
        .attr('class', 'minerLine')
        .merge(minerG);



      var minerSVG = minerGEnter.selectAll('path').data((d) => [d]);



      var minerSVGEnter = minerSVG.enter()
        .append('path')
        .attr('class', 'line')
        .merge(minerSVG)
        .transition()
        .duration(500)
        .ease(d3.easeLinear, 2)

        .attr('d', line(data))

        .on('end', () => {
          requestAnimationFrame(tick)
        })


    }
  </script>
</body>

</html>


Related Query

More Query from same tag