红宝书第四十三讲：基于资料的数据可视化工具简单介绍：D3.js 与 Canvas绘图12
资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲
一、D3.js：数据驱动文档的王者 1
核心特性（根据资料1）：
- 多渲染方式支持：可生成SVG、Canvas、CSS或HTML5动态图表
- 极致的控制精度：允许对最终渲染结果进行微调
- 应用场景：金融数据可视化、地理信息地图、动态交互动画
基础用法流程：
代码示例（数据到元素的绑定，虚拟代码）：
// 假设DOM中已有空<svg>元素
d3.select('svg')
.selectAll('circle') // 选择所有圆形（初始为空）
.data([10,20,30]) // 绑定数据集
.enter() // 为缺少的元素创建占位
.append('circle') // 添加与数据数量相同的圆形
.attr('r', d => d) // 根据数据值设定半径
二、Canvas绘图基础 2
资料6展示了Canvas的底层像素操作能力：
- 获取图像数据：
const canvas = document.getElementById('drawing');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0,0, canvas.width, canvas.height); // 获取像素数据
- 灰阶滤镜示例：
// data数组结构：每4个元素代表RGBA值（0~255）
for(let i=0; i<data.length; i +=4){
const avg = (data[i] + data[i+1] + data[i+2])/3; // 计算RGB平均值
data[i] = data[i+1] = data[i+2] = avg; // 转换为灰阶
}
ctx.putImageData(imageData, 0,0); // 更新画布显示
三、D3.js与Canvas的结合模式12
| 技术组合 | 适用场景 | 优势对比 |
|---|---|---|
| D3生成SVG | 需要矢量缩放交互的图表 | 元素级别控制，开销较大 |
| D3控制Canvas绘制 | 海量数据(如10000+数据点) | 性能更优，缺少DOM交互性 |
目录：总目录
上篇文章：红宝书第四十二讲：Angular核心特性精讲：依赖注入 & RxJS整合
下篇文章：红宝书第四十四讲：基于红宝书的两个动画库Anime.js和three.js介绍
脚注
《JavaScript高级程序设计（第5版）》指出D3是最强大的JS数据可视化工具，支持多种渲染方式 ↩︎ ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》演示了Canvas获取原始像素数据并进行灰阶处理的方法 ↩︎ ↩︎ ↩︎
