animation - 使用D3 Y轴线闪烁
问题描述
我正在尝试创建一个运行折线图,其中动画变化以及 X 和 Y 轴以及线本身。
我从基本动画解释开始: https ://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3
并创建了我自己的(见下面的代码和链接)
我的问题是,一旦我添加await chartBug.update
Y 轴就开始闪烁。请参阅下面的动画 gif:
我想我需要await,等待动画完成后再开始下一个动画,并控制动画的流畅速度。
当我在这里时,我还想问一下如何强制轴绘制开始和结束刻度。
谢谢您的帮助
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;
}
}
解决方案
问题似乎出在您的 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))
推荐阅读
- python - 如何将“文件”类型文件批量转换为“文本”类型文件
- javascript - 如何在 UWP 应用的 XAML Webview 中添加对 HTML5 通知的支持?
- git - 处理分歧的本地和远程功能分支
- c# - 更改条目文本更改 ListView 项目中其他条目文本中的文本
- linux - 使用 Linux 帧缓冲区实现精确帧速率的方法
- amazon-cloudformation - 映射到 CloudFormation 中的字符串的自定义下拉值
- javascript - Angular RouteGuard http映射内存泄漏
- debugging - localhost 仅在 Chrome 中加载,没有其他浏览器
- excel - 应用程序类的 Visual Basic 编译错误:预期:语句结束
- ios - SFSafariViewController 关闭后背景音频