D3.js D3转换路径向左并同时上/下移动

在Mike Bostock关于路径转换的教程之后，我尝试创建一个插值折线图，该折线图不仅可以随时间移动，还可以转换y比例/y轴，这样就始终适合数据的上下限

一些背景信息：该行由剪贴画剪裁，并在添加新数据点时向左移动。每个新的数据点都由tick函数添加，该函数还可以将路径转换为向左滑动

现在的问题是，当我更新y轴域时，它会跳到新的位置。但是，我希望它能平稳地向上或向下过渡，就像它沿x轴移动一样。解决方案可能在于基于新的数据最大值转换路径的缩放。有没有办法实现这一点，或者需要通过构建用于插值路径的自定义d3.interpolator（）来采用不同的方法

function tick() {

  // Push a new data point onto the back.
  data.push(random());

  // Redraw the line.
  d3.select(this)
    .attr("d", line)
    .attr("transform", null);

  // Slide it to the left.
  d3.active(this)
    .attr("transform", "translate(" + x(0) + ",0)")
    .transition()
    .on("start", tick);

  // Pop the old data point off the front.
  data.shift();
  let max = d3.max(data, (d) => {
    return d;
  });

  y = d3.scaleLinear()
  .domain([-1, max])
  .range([height, 0]);

  d3.select('g .axis.axis--y').transition().duration(500).call(d3.axisLeft(y))

  d3.select('g .axis.axis--x').transition().duration(500)
  .attr("transform", "translate(0," + y(0) + ")")
}

---

我创建了一个JSFIDLE来演示这个问题。

通过使用外部

d3插值路径库找到了解决方案。我没有使用变换来转换路径，而是使用
d3.interpolatePath
使用旧数据对路径进行插值，使用新数据对路径进行插值。其中，
previous
是旧路径，
current
是带有新添加数据点的新路径

d3.select(this)
  .attr("d", lineOld)
  .attr("transform", null)
  .transition().duration(500).ease(d3.easeLinear).attrTween('d', (d) => {
    let previous = d3.select(this).attr('d');
    let current = line(d);
    return d3.interpolatePath(previous, current)
  }).on("end", tick);

可以找到带有我的解决方案的JSFIDLE
您是否尝试将as
ease
函数添加到您的转换中？说明如下：