Я пытаюсь создать бегущую линейную диаграмму, в которой она анимирует изменения, а также оси X и Y и саму линию.
Я начал с основного объяснения анимации по адресу: https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3
И создал свой собственный (см. код и ссылку ниже)
Моя проблема в том, что как только я добавляю await chartBug.update
, ось Y начинает мерцать. Смотрите анимированный gif ниже:
Я думаю, что мне нужно ожидание, чтобы дождаться завершения анимации, прежде чем я начну следующую анимацию, и контролировать плавную скорость анимации.
Пока я здесь, я хотел бы также спросить, как я могу заставить ось рисовать начальные и конечные тики.
Спасибо за помощь
Вот ссылка на страницу на 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;
}
}