D3.js实现线条的流动效果（从一端移动到另一端并且变色）
参考：
SVG：理解stroke-dasharray和stroke-dashoffset属性
使用SVG + CSS实现动态霓虹灯文字效果
纯CSS实现帅气的SVG路径描边动画效果
实现的效果为：路径左移到完全看不见的地方，然后一边右移，一边从黑色变为红色
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>D3.js实现线条的流动效果（从一端移动到另一端并且变色）</title><script src="https://d3js.org/d3.v7.min.js"></script></head>
<body><script>let svg = d3.select('body').append('svg').attr('width', 600).attr('height', 700);// 创建一条线段svg.append("path").attr("d","m 100,120 500,0").attr("stroke-width","2").attr("stroke","black");// 选择路径元素let path = svg.select("path");// 获取路径总长度let totalLength = path.node().getTotalLength();// 设置初始属性path.attr("stroke-dasharray", totalLength).attr("stroke-dashoffset", totalLength);// 过渡动画path.transition().duration(2000).ease(d3.easeLinear).attr("stroke", "red").attr("stroke-dashoffset", 0);</script>
</body>
</html>
首先，选择路径元素并获取其总长度。然后，设置路径的初始属性，包括颜色、宽度和样式。
在过渡动画中，使用d3.easeLinear缓动函数指定线性动画。在2秒内将路径的颜色更改为红色，并将路径的样式从总长度的值变为0，使其逐渐从头到尾显示为红色。
.attr("stroke-dasharray", totalLength)
.attr("stroke-dashoffset", totalLength);
这两个属性是用来创建 SVG 线段动画效果的。当 stroke-dasharray 属性被设置为 totalLength 时，将路径线段分割成一系列等长度的线段，每个线段的长度为 totalLength。当 stroke-dashoffset 属性被设置为 totalLength 时，路径线段会被偏移整个长度，最初看不到线段，因为其完全被隐藏在路径起点之外。
通过设置这两个属性，我们可以创建出具有动态线条效果的 SVG 路径动画。在这个例子中，路径线段的 stroke-dashoffset 属性的值被动画改变为0，这使得路径的线条渐渐地从起点到终点呈现出来，从而实现了线段动态绘制的效果。
