D3.js实现线条的流动效果（从一端移动到另一端并且变色）
以下是一个使用D3.js创建线条流动效果的简单示例。这段代码会创建一个线条，它从图表的一侧移动到另一侧，并在移动过程中更改颜色。
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg width="500" height="200"></svg>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var line = svg.append("line")
.attr("x1", 0)
.attr("y1", height / 2)
.attr("x2", width)
.attr("y2", height / 2)
.attr("stroke", "blue");
d3.interval(function() {
var x = line.attr("x1");
line.attr("x1", x == width ? 0 : x + 1)
.attr("x2", x == width ? width : x + 1)
.attr("stroke", x == width ? "blue" : "red");
}, 100); // 每100毫秒更新一次位置和颜色
</script>
</body>
</html>这段代码使用了D3.js的d3.interval函数来创建一个定时器，每100毫秒更新线条的起点和终点的横坐标，并相应地改变线条的颜色。当线条到达svg的最右侧时，它会重置回初始位置并改回原来的颜色。
评论已关闭