Animation Y轴线使用D3闪烁

我正在尝试创建一个运行的折线图，它可以在其中设置更改、X轴和Y轴以及直线本身的动画

我从以下的基本动画说明开始：

并创建了我自己的（请参见下面的代码和链接）

我的问题是，只要我添加

wait chartBug.update

Y轴就开始闪烁。 请参见下面的动画gif：

我想我需要等待，等待动画完成，然后再开始下一个动画，并控制动画的平滑速度

在这里，我还想问一下如何强制轴绘制开始和结束刻度

谢谢你的帮助

这里有一个

下面是问题的动画gif-源代码如下：

chartBug={
const svg=d3.create（“svg”）.attr（“视图框”[0,0，宽度，高度]）；
const zx=x.copy（）；//x，但具有一个新域。
const zy=y.copy（）；//x，但具有一个新域。
常数线=d3
.第（）行
.x（d=>zx（d.date））
.y（d=>y（d.close））；
常量路径=svg
.append（“路径”）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，1.5）
.attr（“笔划斜接限制”，1）
.attr（“d”，行（数据））；
const gx=svg.append（“g”）.call（xAxis，zx）；
const gy=svg.append（“g”）.call（yAxis，y）；
返回Object.assign（svg.node（）{
更新（步骤）{
常量部分数据=[]；
for（设i=0；id.date））；
转换（t）调用（xAxis，zx）；
zy.domain（[0，d3.max（partialData，d=>d.close）]；
转换（t）调用（yAxis，zy）；
路径转换（t）.attr（“d”，行（数据））；
返回t.end（）；
}
});
}

{
重播2；
for（设i=0，n=data.length；i

问题似乎出在您的yAxis函数上，每次更新和重新缩放yAxis都会重新创建，并且域会被重新绘制和删除，如果您不介意保留它，您可以从中删除

调用（g=>g.select（.domain”）.remove（）

。 您需要等待过渡完成后更新。我认为这也回答了您的其他问题

yAxis=（g，scale=y）=>g
.attr（“transform”，translate（${margin.left}，0）`）
.call（d3.axisLeft（比例）。ticks（高度/40））

chartBug = {
  const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

  const zx = x.copy(); // x, but with a new domain.
  const zy = y.copy(); // x, but with a new domain.

  const line = d3
    .line()
    .x(d => zx(d.date))
    .y(d => y(d.close));

  const path = svg
    .append("path")
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("stroke-miterlimit", 1)
    .attr("d", line(data));

  const gx = svg.append("g").call(xAxis, zx);

  const gy = svg.append("g").call(yAxis, y);

  return Object.assign(svg.node(), {
    update(step) {
      const partialData = [];
      for (let i = 0; i < step; i++) {
        partialData.push(data[i]);
      }
      const t = svg.transition().duration(50);
      zx.domain(d3.extent(partialData, d => d.date));
      gx.transition(t).call(xAxis, zx);

      zy.domain([0, d3.max(partialData, d => d.close)]);
      gy.transition(t).call(yAxis, zy);

      path.transition(t).attr("d", line(data));
      return t.end();
    }
  });
}