我一直非常关注有关D3线过渡的post，并实现了与此类似的功能。

最终目标是使用yAxis自动缩放功能显示实时折线图。

我已经定义了渲染逻辑，就像这样：

每勾

const tick = () => {
    r += 1;
    const randomDigit = random();

    data.push(randomDigit);

    const p = d3.select(".line").node();

    const yMin = d3.min(data,d => d);
    const yMax = d3.max(data,d => d);

    y.domain([yMin,yMax]);

    if (g.selectAll(".axis.axis--y").empty()) {
      g.append("g")
        .attr("class","axis axis--y")
        .call(d3.axisLeft(y));
    } else {
      g.selectAll(".axis.axis--y")
        .transition()
        .duration(1500)
        .call(d3.axisLeft(y));
    }


    d3.select(p)
      .enter()
      .attr("class","line")
      .attr("d",line)
      .attr("transform",null);

    d3.active(p)
      .attr("transform","translate(" + x(0) + ",0)")
      .transition()
      .duration(1500)
      .attr("d",line)
      .on("start",tick);

    data.shift();
  };

但是图表看起来很奇怪。

它具有以下摆动问题。

enter image description here

有什么建议可以解决吗？

感谢您阅读我的问题！