引用网站代码灯塔网站seo
D3.js学习记录
首先通过generateRandomData()函数生成随机数，后续可通过setInterval控制固定秒数内更新图表。
function generateRandomData() {return Array.from({ length: 24 }, () =>Math.floor(Math.random() * 1000) + 10);}将d3生成图表的代码封装到 updateChart() 函数中，参数是传入的数据（由generateRandomData()生成），使用 .join 处理数据更新。
function updateChart(newData) {// 数据绑定与元素更新svg.selectAll('rect').data(newData) // 绑定新数据.join( // 处理元素的进入、更新、退出enter => enter // 处理新元素.append('rect').attr('width', d => d) // 初始宽度.attr('height', 16) // 固定高度.attr('x', 0) // 水平起始位置.attr('y', (d, i) => i * 20), // 垂直位置（每个间隔20px）update => update // 处理已存在的元素.attr('width', d => d) // 更新宽度为新数据值.attr('y', (d, i) => i * 20), // 同步更新垂直位置（可选）exit => exit.remove() // 移除多余元素（当数据减少时）);}由于此处d3.js使用的版本是v5，所以动画的关键是配合使用CSS，如 rect { transition: all 0.6s; }
rect {transition: all 0.6s;/* 全局过渡（可选，D3的transition更优先） */
}【效果图】
【完整代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css">
</head><body><main><h1>Today</h1><svg width="900" height="400"></svg></main><script text="script" src="./d3.min.js"></script></body>
<script>// 生成随机数据的函数（可单独提取方便复用）function generateRandomData() {return Array.from({ length: 24 }, () =>Math.floor(Math.random() * 1000) + 10);}// 选择SVG容器const svg = d3.select('svg');// 定义更新图表的函数function updateChart(newData) {// 数据绑定与元素更新svg.selectAll('rect').data(newData) // 绑定新数据.join( // 处理元素的进入、更新、退出enter => enter // 处理新元素.append('rect').attr('width', d => d) // 初始宽度.attr('height', 16) // 固定高度.attr('x', 0) // 水平起始位置.attr('y', (d, i) => i * 20), // 垂直位置（每个间隔20px）update => update // 处理已存在的元素.attr('width', d => d) // 更新宽度为新数据值.attr('y', (d, i) => i * 20), // 同步更新垂直位置（可选）exit => exit.remove() // 移除多余元素（当数据减少时）);}// 初始加载时绘制第一组数据updateChart(generateRandomData());// 设置定时器，每3秒更新一次数据setInterval(() => {updateChart(generateRandomData());}, 3000);
</script></html>