第二部分 · 术 / Chapter 5

可视化的编程基础

从早期图形编程到现代 Web 可视化，本章系统介绍可视化开发所需的编程基础。从 HTML、CSS、JavaScript 三件套出发，逐步深入命令式（D3.js）、声明式（Vega-Lite）与沉浸式（Three.js）编程范式，并概览主流开发框架与交互式可视化工具。

D3.js Vega-Lite HTML CSS JavaScript Vue React Tableau

5.1

可视化编程技术发展

可视化编程技术的发展可以追溯到上世纪60年代。从早期基于终端的字符绘图，到 OpenGL 等图形API，再到如今基于 Web 的交互式可视化，编程技术的每一次进步都为可视化带来了新的可能。

🖥️

桌面时代
以 C/C++ + OpenGL、Java Swing、Processing 等为代表，图形编程门槛高，但渲染性能强大。

🌐

Web 时代
HTML5 Canvas、SVG、WebGL 的出现使浏览器成为强大的可视化平台，配合 JavaScript 生态，实现跨平台交互。

📜 交互演示：可视化编程技术时间线互动

点击时间节点查看详细信息。悬浮可查看简介。

🧠

小测验：5.1 编程技术发展

+20 XP

Q1. 现代 Web 可视化相比桌面图形编程的最大优势是什么？

Q2. SVG 和 Canvas 的核心区别是什么？

5.2

网页编程基础

现代可视化开发几乎离不开网页技术。HTML 定义结构、CSS 控制样式、JavaScript 实现逻辑——这三者构成了 Web 开发的基石，也是可视化编程的起点。

5.2.1 HTML 基础

HTML（HyperText Markup Language）是网页的骨架。它通过标签（Tag）来组织内容，形成树状的文档结构（DOM）。常见标签包括 <div>、<p>、<h1>~<h6>、<span>、<svg> 等。

对于可视化而言，HTML 中最重要的元素是 <svg>（矢量图形容器）和 <canvas>（像素画布），它们是绑定可视化图形的载体。

5.2.2 CSS 基础

CSS（Cascading Style Sheets）为 HTML 元素添加视觉样式。通过选择器匹配元素，设置颜色、字体、布局、动画等属性。在可视化中，CSS 用于控制图表的排版、颜色方案、过渡动画和响应式布局。

核心概念包括：选择器优先级（内联 > ID > 类 > 标签）、盒模型（margin/border/padding/content）、Flexbox 与 Grid 布局。

5.2.3 JavaScript 基础

JavaScript 是 Web 的编程语言，负责网页的动态行为。在可视化中，JavaScript 用于数据处理、DOM 操作、事件监听和动画控制。ES6+ 引入了箭头函数、模板字符串、解构赋值、Promise 等现代特性，极大提升了开发效率。

💡

关键概念：DOM（Document Object Model）是 HTML 文档的编程接口。JavaScript 通过 DOM API（如 document.querySelector、element.addEventListener）操作页面元素，实现交互式可视化。

🧪 交互演示：HTML/CSS/JS 三件套互动 · 实时编辑

编辑左侧代码，右侧实时预览效果。点击标签页切换 HTML / CSS / JS。

<div class="chart-container">
  <h3>我的第一个图表</h3>
  <div class="bar" style="--val:80%">
    HTML 80%
  </div>
  <div class="bar" style="--val:65%">
    CSS 65%
  </div>
  <div class="bar" style="--val:90%">
    JavaScript 90%
  </div>
  <button id="addBar">添加柱子</button>
</div>

.chart-container {
  font-family: system-ui, sans-serif;
  padding: 16px;
}
h3 {
  color: #059669;
  margin-bottom: 12px;
}
.bar {
  background: linear-gradient(90deg, #059669, #0d9488);
  color: white;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 6px;
  width: var(--val);
  font-size: 13px;
  font-weight: 600;
  transition: width 0.5s ease;
}
button {
  margin-top: 12px;
  padding: 8px 16px;
  background: #059669;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button:hover { background: #047857; }

const btn = document.getElementById('addBar');
const container = document.querySelector('.chart-container');

btn.addEventListener('click', () => {
  const val = Math.floor(Math.random() * 60 + 30);
  const bar = document.createElement('div');
  bar.className = 'bar';
  bar.style.setProperty('--val', val + '%');
  bar.textContent = '新项 ' + val + '%';
  container.insertBefore(bar, btn);
});

预览

🌐

小测验：5.2 网页编程基础

+20 XP

Q1. 在 HTML 中，哪个标签常用于承载 D3.js 绑定的矢量图形？

Q2. CSS 选择器优先级从高到低的正确顺序是？

5.3

可视化编程技术介绍

可视化编程技术可以分为三大范式：命令式编程精确控制每个图形元素，声明式编程描述数据到视觉的映射规则，沉浸式编程构建三维和虚拟现实环境。

5.3.1 命令式编程：D3.js

D3.js（Data-Driven Documents）是最著名的命令式可视化库。其核心思想是数据绑定：将数据与 DOM 元素一一对应，通过 enter、update、exit 三个阶段管理元素的创建、更新和删除。

D3 提供了丰富的工具：比例尺（Scales）将数据域映射到视觉范围，坐标轴（Axes）自动生成刻度标签，过渡动画（Transitions）实现平滑的状态切换。

🔑

D3 数据绑定模式：selectAll().data().join() 是 D3 v7 推荐的简洁写法，自动处理 enter/update/exit。旧写法 enter().append() 仍然有效但更繁琐。

📊 交互演示：D3.js 入门互动

体验 D3 的数据绑定、比例尺和过渡动画。点击按钮切换数据，观察 enter/update/exit 过程。

过渡时间 800ms

📊

小测验：5.3.1 D3.js

+20 XP

Q1. D3.js 的 enter 选择集代表什么？

Q2. D3 中 d3.scaleLinear().domain([0,100]).range([0,500]) 的作用是？

5.3.2 声明式编程：Vega-Lite

Vega-Lite 采用声明式的方式定义可视化：用户只需描述"数据如何映射到视觉通道"，而不必指定每个像素的绘制过程。Vega-Lite 基于图形语法（Grammar of Graphics），一个可视化规范（Specification）包含数据、标记类型、编码通道等核心元素。

🤔

思考：命令式编程（D3.js）和声明式编程（Vega-Lite）各有什么优缺点？什么场景下应该选择哪种方式？

5.3.3 沉浸式编程：Three.js / WebGL

Three.js 是基于 WebGL 的 3D 图形库，可以在浏览器中创建三维场景、VR/AR 体验。在可视化中，Three.js 用于构建三维散点图、地球可视化、分子结构展示等需要深度感知的场景。

核心概念包括：场景（Scene）、相机（Camera）、渲染器（Renderer）、光源（Light）和网格（Mesh）。

⚖️ 交互演示：命令式 vs 声明式对比

同样的柱形图，分别用 D3.js（命令式）和 Vega-Lite（声明式）实现。对比代码量和思维方式。

● D3.js（命令式）

// D3.js 命令式代码 const data = [{name:"A",val:40},{name:"B",val:65}, {name:"C",val:30},{name:"D",val:85}]; const svg = d3.select("#chart") .append("svg").attr("width",300).attr("height",200); const x = d3.scaleBand() .domain(data.map(d=>d.name)) .range([40,280]).padding(0.2); const y = d3.scaleLinear() .domain([0,100]).range([180,20]); svg.selectAll("rect") .data(data).join("rect") .attr("x", d => x(d.name)) .attr("y", d => y(d.val)) .attr("width", x.bandwidth()) .attr("height", d => 180-y(d.val)) .attr("fill", "#059669"); svg.append("g") .attr("transform","translate(0,180)") .call(d3.axisBottom(x)); svg.append("g") .attr("transform","translate(40,0)") .call(d3.axisLeft(y));

● Vega-Lite（声明式）

// Vega-Lite 声明式规范 { "$schema": "https://vega.github.io/ schema/vega-lite/v5.json", "data": { "values": [ {"name":"A","val":40}, {"name":"B","val":65}, {"name":"C","val":30}, {"name":"D","val":85} ] }, "mark": "bar", "encoding": { "x": {"field":"name","type":"nominal"}, "y": {"field":"val","type":"quantitative"}, "color": {"value": "#3b82f6"} } }

对比维度	D3.js (命令式)	Vega-Lite (声明式)
思维方式	告诉计算机"如何做"	告诉计算机"做什么"
代码量	较多，需手动创建每个元素	精简，用JSON规范描述
灵活性	极高，完全自定义	受限于语法支持的图表类型
学习曲线	陡峭，需掌握DOM和SVG	平缓，适合快速探索
适用场景	定制化、创新可视化	快速原型、标准图表

📝

小测验：5.3 编程范式

+20 XP

Q1. Vega-Lite 的"声明式"含义是？

Q2. Three.js 创建 3D 场景的三个必要元素是？

5.4

可视化编程框架

现代可视化项目通常使用前端框架来组织代码。Vue 和 React 是目前最流行的两个框架，它们都采用组件化的开发模式，将复杂界面拆分为可复用的组件。

💚

Vue.js
渐进式框架，模板语法直观，响应式数据绑定。适合快速原型和渐进增强。可视化库：ECharts、Vue-D3。

💙

React
Facebook 开发，JSX 语法，虚拟 DOM，单向数据流。生态庞大。可视化库：Recharts、Victory、Nivo。

框架	核心理念	模板/渲染	状态管理	可视化生态
Vue	渐进式、响应式	HTML模板 + 指令	Vuex / Pinia	ECharts, Vue-D3
React	组件化、函数式	JSX (JS中写HTML)	Redux / Zustand	Recharts, Nivo, Victory

🧩

小测验：5.4 编程框架

+20 XP

Q1. Vue 和 React 最大的共同点是什么？

Q2. React 的虚拟 DOM (Virtual DOM) 的主要作用是？

5.5

交互式可视化工具

并非所有可视化任务都需要编程。交互式可视化工具通过图形化界面让用户无需编写代码即可创建可视化，降低了使用门槛。这些工具各有侧重，覆盖了从商业分析到学术研究的广泛场景。

🛠️ 交互演示：可视化工具对比互动

点击卡片查看各工具的详细信息。对比它们的特点、优势和适用场景。

📊 Tableau

商业智能行业标准

📈 Power BI

微软生态深度集成

🎨 Lyra

交互式可视化设计

🖌️ Data Illustrator

图形设计驱动可视化

📐 Charticulator

基于约束的图表设计

Tableau

类型商业工具

特点拖拽式操作，自动推荐可视化类型

优势直观易用，图表类型丰富，社区庞大

劣势价格昂贵，定制化受限

适用企业级商业分析与仪表板

🛠️

小测验：5.5 交互式工具

+20 XP

Q1. Charticulator 的独特之处在于？

Q2. 以下哪个工具与微软 Office 生态集成最紧密？

🎮

互动闯关：编程基础挑战

通过趣味游戏巩固所学知识，在挑战中加深理解！完成每个游戏可获得额外 XP 奖励。

📝代码填空挑战 +30 XP

将正确的代码片段拖放到空白处，完成 D3.js 代码。共 5 个空位！

已填: 0/5 得分: 0

选择代码片段（点击选中后再点击空位）：

🧩技术配对挑战 +30 XP

将技术概念与其正确描述配对。先点击左侧概念，再点击右侧描述。

已配对: 0/6 得分: 0

技术概念（点击选择）

描述（点击配对）

🛠️工具选择挑战 +30 XP

根据场景需求，选择最合适的技术或工具。共 5 轮！

轮次: 1/5 得分: 0

← 上一章第 4 章：数据处理下一章 → 第 6 章：高维数据可视化

📚 返回教材首页