```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const PADDING = 60; const STEP_INTERVAL = 500; // ms // 颜色配置 const COLORS = { bg: '#0f172a', // slate-900 grid: '#334155', // slate-700 axis: '#94a3b8', // slate-400 line: '#3b82f6', // blue-500 lineGlow: '#60a5fa', // blue-400 dot: '#22d3ee', // cyan-400 text: '#cbd5e1', // slate-300 positive: '#10b981', // emerald-500 negative: '#ef4444', // red-500 }; export const RandomWalkView = () => { // 核心数据状态：[{ x: step, y: value }] const [data, setData] = useState([{ x: 0, y: 0 }]); const [isRunning, setIsRunning] = useState(true); // 用于动画的 Ref const animationFrameRef = useRef(null); const lastUpdateRef = useRef(0); // 重置功能 const handleReset = () => { setData([{ x: 0, y: 0 }]); setIsRunning(true); }; // 模拟循环 useEffect(() => { if (!isRunning) return; const loop = (timestamp) => { if (timestamp - lastUpdateRef.current >= STEP_INTERVAL) { setData(prev => { const lastPoint = prev[prev.length - 1]; // 随机游走逻辑：50% +1, 50% -1 const change = Math.random() > 0.5 ? 1 : -1; const newPoint = { x: lastPoint.x + 1, y: lastPoint.y + change }; return [...prev, newPoint]; }); lastUpdateRef.current = timestamp; } animationFrameRef.current = requestAnimationFrame(loop); }; animationFrameRef.current = requestAnimationFrame(loop); return () => { if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current); }; }, [isRunning]); // 计算视图范围和比例 const { xScale, yScale, yDomain, xDomain } = useMemo(() => { const xMax = Math.max(20, data.length + 2); // 至少显示20格，随数据增长 const yValues = data.map(d => d.y); const yMinData = Math.min(...yValues); const yMaxData = Math.max(...yValues); // Y轴动态范围，保证0在中心附近，且留有余地 const yAbsMax = Math.max(Math.abs(yMinData), Math.abs(yMaxData), 5); // 最小范围 +/- 5 const yDomain = [-yAbsMax - 1, yAbsMax + 1]; const drawableWidth = VIEW_WIDTH - PADDING * 2; const drawableHeight = VIEW_HEIGHT - PADDING * 2; const xScale = (val) => PADDING + (val / xMax) * drawableWidth; // Y轴翻转，数值越大越靠上 const yScale = (val) => VIEW_HEIGHT - PADDING - ((val - yDomain[0]) / (yDomain[1] - yDomain[0])) * drawableHeight; return { xScale, yScale, yDomain, xDomain: [0, xMax] }; }, [data]); // 生成网格线 const gridLines = useMemo(() => { const xLines = []; const yLines = []; // X轴网格：每5步一条线 const xStep = Math.ceil(xDomain[1] / 10 / 5) * 5; for (let i = 0; i <= xDomain[1]; i += xStep) { xLines.push({ val: i, pos: xScale(i) }); } // Y轴网格 for (let i = Math.ceil(yDomain[0]); i <= Math.floor(yDomain[1]); i++) { // 仅显示偶数网格或根据密度调整 if (i % 2 === 0) { yLines.push({ val: i, pos: yScale(i) }); } } return { xLines, yLines }; }, [xScale, yScale, xDomain, yDomain]); // 生成折线路径 const linePath = useMemo(() => { if (data.length === 0) return ""; return data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${xScale(d.x)} ${yScale(d.y)}`).join(' '); }, [data, xScale, yScale]); // 生成渐变填充区域 (Area Chart effect) const areaPath = useMemo(() => { if (data.length === 0) return ""; const zeroY = yScale(0); const startX = xScale(data[0].x); const endX = xScale(data[data.length - 1].x); return `${linePath} L ${endX} ${zeroY} L ${startX} ${zeroY} Z`; }, [linePath, data, xScale, yScale]); const currentPoint = data[data.length - 1]; const currentScreenX = xScale(currentPoint.x); const currentScreenY = yScale(currentPoint.y); return ( ); }; ```