当前位置：首页 > news >正文

02-D3.js 控制横向柱图切换数据带动画效果

news 2025/8/20 17:51:39

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>

查看全文

http://www.dtcms.com/a/251139.html