D3.js实现线条的流动效果（从一端移动到另一端并且变色）

news2024/11/15 21:06:07

参考：
SVG：理解stroke-dasharray和stroke-dashoffset属性
使用SVG + CSS实现动态霓虹灯文字效果
纯CSS实现帅气的SVG路径描边动画效果

实现的效果为：路径左移到完全看不见的地方，然后一边右移，一边从黑色变为红色
D3.js实现线条的流动效果（从一端移动到另一端并且变色）

<!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，这使得路径的线条渐渐地从起点到终点呈现出来，从而实现了线段动态绘制的效果。
在这里插入图片描述