Анимировать линию линейного графика
У меня здесь есть стекблиц - https://stackblitz.com/edit/simple-line-chart?embed=1&file=src/app/bar-chart.ts&hideNavigation=1
Это простой линейный график с использованием D3
Я хочу анимировать линию слева направо.
Не могу найти много из этого или что-нибудь, объясняющее лучший способ
Фактический график также будет иметь гистограмму, поэтому я не могу анимировать и белый блок сверху, чтобы показать линию
Это один из примеров, которые я нашел, но я не могу заставить его работать в моем примере
Вы проверяли код в упомянутом примере @ rioV8? Переход применяется с использованием stroke-dasharray, а не d из path. Это действительно очень хорошо работает: вот вилка: stackblitz.com/edit / ...
@Shashank: динамическое тире можно упростить. Какая польза от i? Смотрите мою редакцию моего ответа.
@ rioV8 Это правда. @ttmt: Вот Пример Майка с интерполяцией штрих-тире с пояснением, на который вы также можете ссылаться вместе с исключением не столь необходимого i.
Ответы 2
Это все проблема this.
private transition(path) {
var that = this;
path.transition()
.duration(2000)
.attrTween("stroke-dasharray", that.tweenDash);
}
private tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function (t) { return i(t); };
}
private drawLine(linedata:any){
// ....
var p = this.lineArea.append("path")
.attr("class", "line")
.attr("d", valueline(linedata))
.attr("stroke-linejoin", "round")
//.call(that.transition)
;
this.transition(p);
}
Редактировать
Зачем нам i?
Это тоже самое
private tweenDash() {
var l = this.getTotalLength();
return d3.interpolateString("0," + l, l + "," + l);
}
Ах! Проблема с this. Этот - фантастический ответ / ответ на проблему this.
Зачем возиться с функцией промежуточного кадра, интерполяторами и this?
Самое простое и распространенное решение - просто настроить stroke-dasharray и stroke-dashoffset на общую длину ...
var totalLength = thisLine.node().getTotalLength();
thisLine.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength);
А потом измените его простым переходом:
thisLine.transition()
.duration(1000)
.attr("stroke-dashoffset", 0);
Нет необходимости в анимации stroke-dasharray.
Вот разветвленный код: https://stackblitz.com/edit/simple-line-chart-3hpaje?file=src/app/bar-chart.ts
что может найти простой поиск с помощью любимой поисковой системы: bl.ocks.org/pjsier/28d1d410b64dcd74d9dab348514ed256