数据可视化：Web数据可视化：D3.js教程.pdfVIP

数据可视化：数据可视化：Web数据可视化：数据可视化：D3.js教程教程

数据可视化：数据可视化：Web数据可视化：数据可视化：D3.js

1.D3.js基础基础

1.1D3.js简介简介

D3.js(Data-DrivenDocuments)是一个用于网页上进行数据可视化的JavaScript库。它使用

HTML、SVG和CSS来展示数据，提供了强大的数据驱动能力，可以将数据绑定到文档对象模

型（DOM）中，并应用数据驱动的转换来生成可视化效果。D3.js的灵活性和强大的功能使其成

为数据可视化领域的首选工具之一。

1.2D3.js安装与环境搭建安装与环境搭建

安装安装D3.js

1.通过通过CDN引入引入：在HTML文件的head部分添加D3.js的链接。

scriptsrc=/d3.v6.min.js/script

2.使用使用npm安装安装：在项目中通过npm安装D3.js。

npminstalld3

环境搭建环境搭建

1.创建创建HTML文件文件：创建一个基本的HTML文件，用于承载D3.js生成的可视化内容。

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

titleD3.js示例/title

scriptsrc=/d3.v6.min.js/script

/head

body

scriptsrc=app.js/script

/body

/html

2.编写编写JavaScript代码代码：在app.js文件中编写使用D3.js的代码。

1.3基本的基本的D3.js绘图示例绘图示例

示例代码示例代码

//数据

constdata=[4,8,15,16,23,42];

//选择SVG容器，设置其大小

constsvg=d3.select(body)

.append(svg)

.attr(width,500)

.attr(height,300);

//添加矩形

data.forEach((d,i)={

svg.append(rect)

.attr(x,i*50)

.attr(y,250)

.attr(width,40)

.attr(height,250-d)

.attr(fill,steelblue);

});

代码解释代码解释

•数据定义数据定义：data数组包含了要可视化的数据点。

•选择选择SVG容器容器：使用d3.select选择body元素，然后使用append方法添加一个SVG元

素，并设置其宽度和高度。

•添加矩形添加矩形：遍历data数组，为每个数据点添加一个矩形。矩形的位置和大小由数据点的

值决定，颜色设置为steelblue。

1.4数据绑定与选择器数据绑定与选择器

数据绑定数据绑定

D3.js通过data方法将数据绑定到DOM元素上，使得每个数据项可以对应一个DOM元素。这允

许D3.js根据数据的变化动态更新DOM。

示例代码示例代码

//数据

constdata=[

{name:Alice,age:30},

{name:Bob,age:25},

{name:Charlie,age:35}

];

//选择容器

constcontainer=d3.select(body);

//绑定数据并创建元素

container.selectAll(div)

.data(data)

.enter()

.append(div)

.text(d=`${}:${d.age}yearsold`);

代码解释代码解释

•数据定义数据定义：data是一个包含对象的数组，每个对象代表一个人的信息。

•选择容器选择容器