Page 223 - 统计创新与高质量发展

第八章 统计教育与培训：构建专业能力

（五）D3.js 应用详解
D3.js 即 Data - Driven Documents，是一个基于数据操作文档的 JavaScript 库，
它没有预设的图表类型，完全通过代码自定义可视化，适合有较高编程能力和定

制需求的用户。
1. 数据驱动的可视化原理
D3.js 的核心思想是数据驱动，通过将数据绑定到 DOM 元素，根据数据的
变化动态更新可视化。例如，要创建一个简单的柱状图，首先需选择或创建用于

绘制图表的 SVG 容器，然后将数据绑定到 SVG 的矩形元素（代表柱子），通过
设置矩形的属性（如高度、宽度、颜色）来反映数据的特征。
// 创建 SVG 容器
var svg = d3.select(“body”)

.append(“svg”)
.attr(“width”, 500)
.attr(“height”, 300);
// 数据
var data = [4, 8, 15, 16, 23, 42];

// 绑定数据并创建柱子
var bars = svg.selectAll(“rect”)
.data(data)

.enter()
.append(“rect”)
.attr(“x”, function(d, i) { return i * 50; })
.attr(“y”, function(d) { return 300 - d * 5; })
.attr(“width”, 40)

.attr(“height”, function(d) { return d * 5; })
.attr(“fill”, “steelblue”);

2. 高度定制化的可视化效果
由于 D3.js 没有预设图表类型，用户可以根据需求创建各种独特的可视化效
果。比如创建一个复杂的力导向图，用于展示节点之间的关系，通过设置节点的
位置、大小、颜色以及连线的样式等，呈现出丰富的信息。还可创建动态的可视

215