使用D3 Y轴线闪烁答案

【问题标题】：Y axis line is flickering using D3使用D3 Y轴线闪烁
【发布时间】：2020-11-28 06:20:50
【问题描述】：

我正在尝试创建一个运行折线图，它可以在其中动画变化以及 X 和 Y 轴以及线本身。

我从基本的动画解释开始： https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3

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

我的问题是，一旦我添加了await chartBug.update，Y 轴就会开始闪烁。请参阅下面的动画 gif：

我觉得我需要await，等待动画完成后再开始下一个动画，控制动画的流畅速度。

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

感谢您的帮助

这是link to the page on www.observablehq.com

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

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();
    }
  });
}

{
  replay2;
  for (let i = 0, n = data.length; i < n; ++i) {
    await chartBug.update(i);
    yield i;
  }
}

【问题讨论】：

标签： animation d3.js observablehq

【解决方案1】：

问题似乎出在您的 yAxis 函数上，每次新的更新和重新调整 yAxis 都会重新创建，并且域会重新绘制和删除，如果您不介意保留它，可以从中删除 call(g => g.select(".domain").remove()。转换完成后，您需要等待更新。我想这也回答了你的其他问题

yAxis = (g, scale = y) => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(scale).ticks(height / 40))

【讨论】：