红宝书第四十三讲：基于资料的数据可视化工具简单介绍：D3.js 与 Canvas绘图

---

红宝书第四十三讲：基于资料的数据可视化工具简单介绍：D3.js 与 Canvas绘图¹²

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、D3.js：数据驱动文档的王者 ¹

核心特性（根据资料1）：

1. 多渲染方式支持：可生成SVG、Canvas、CSS或HTML5动态图表
2. 极致的控制精度：允许对最终渲染结果进行微调
3. 应用场景：金融数据可视化、地理信息地图、动态交互动画

基础用法流程：

flowchart LR
    加载数据 --> D3解析数据 --> 绑定DOM元素 --> 应用数据驱动样式变化
    D3解析数据 --> 生成SVG路径 --> 绘制图表

代码示例（数据到元素的绑定，虚拟代码）：

// 假设DOM中已有空<svg>元素
d3.select('svg')
  .selectAll('circle') // 选择所有圆形（初始为空）
  .data([10,20,30])    // 绑定数据集
  .enter()             // 为缺少的元素创建占位
  .append('circle')    // 添加与数据数量相同的圆形
  .attr('r', d => d)   // 根据数据值设定半径

---

二、Canvas绘图基础 ²

资料6展示了Canvas的底层像素操作能力：

1. 获取图像数据：

const canvas = document.getElementById('drawing');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0,0, canvas.width, canvas.height); // 获取像素数据

1. 灰阶滤镜示例：

// 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的结合模式¹²

技术组合	适用场景	优势对比
D3生成SVG	需要矢量缩放交互的图表	元素级别控制，开销较大
D3控制Canvas绘制	海量数据(如10000+数据点)	性能更优，缺少DOM交互性

---

目录：总目录
上篇文章：红宝书第四十二讲：Angular核心特性精讲：依赖注入 & RxJS整合

下篇文章：红宝书第四十四讲：基于红宝书的两个动画库介绍

脚注

---

---

1. 《JavaScript高级程序设计（第5版）》指出D3是最强大的JS数据可视化工具，支持多种渲染方式 ↩
2. 《JavaScript高级程序设计（第5版）》演示了Canvas获取原始像素数据并进行灰阶处理的方法 ↩