动画线图线 [英] Animate line graph line

问题描述

我在这里有一个堆叠闪电战- https://stackblitz.com/edit/simple-line-chart?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

I have a stackblitz here - https://stackblitz.com/edit/simple-line-chart?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

它是使用D3的简单折线图

Its a simple line graph using D3

我想从左到右为线设置动画.

I'd like to animate the line from left to right.

无法找到许多此类或最佳解释的任何方式

Cant find many of this or anything explaing the best way

实际图形也将具有条形图，因此我无法在顶部设置动画和白色块以显示线条

The actual graph will have a bar chart as well so I cant animate and white block on top to show the line

推荐答案

为什么要使用补间功能，内插器和this?

Why messing around with a tween function, interpolators and this?

最简单，最常见的解决方案是将stroke-dasharray和stroke-dashoffset设置为总长度...

The easiest and most common solution is simply setting the stroke-dasharray and the stroke-dashoffset for the total length...

var totalLength = thisLine.node().getTotalLength();

thisLine.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength);

然后通过简单的转换对其进行更改:

And then changing it with a simple transition:

thisLine.transition()
    .duration(1000)
    .attr("stroke-dashoffset", 0);

无需补间stroke-dasharray.

这是分叉的代码: https://stackblitz.com/edit/simple-line-chart-3hpaje?file=src/app/bar-chart.ts

这篇关于动画线图线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！