D3.js - 基本用法

简介

概要

D3.js（Data-Driven Documents）是一个用于创建数据可视化的JavaScript库。它使用HTML、SVG和CSS等Web标准来呈现数据，帮助开发者通过数据驱动方式构建交互式、动态的可视化图表和图形。D3.js的主要优点包括灵活性、强大的数据处理能力和对Web标准的广泛支持。

安装与设置

通过包管理器安装 D3
- yarn: yarn add d3
- npm: npm install d3
- pnpm: pnpm add d3
使用cdn引入

<script src="https://d3js.org/d3.v5.min.js"></script>

如何使用
- 直接引入
js 复制代码
```
import * as d3 from "d3";
```
- 导入特定特定元件
js 复制代码
```
 import {select, selectAll} from "d3";
```

数据绑定与选择集

数据绑定

如何将数据绑定到DOM元素上？

首先，需要创建一个 SVG 容器来承载图形元素。假设有一个具有 id 为 "chart" 的<div>元素用于容器：

bash 复制代码

<div id="chart"></div>

然后所有的操作都基于这个容器进行操作。

js 复制代码

 // 首先要基于上边的 div 创建一个SVG，如下
 const svg = d3.select("#chart")
  .append("svg") 
  .attr("width", 400)
  .attr("height", 300)

选择元素

在 D3 中，用于选择元素的函数有两个：

d3.select()：是选择所有指定元素的第一个
d3.selectAll()：是选择指定元素的全部

select 和 selectAll 的参数是符合 CSS 选择器的条件的

🌰 如下例子

js 复制代码

const body = d3.select("body"); //选择文档中的body元素 
const p1 = body.select("p"); //选择body中的第一个p元素 
const p = body.selectAll("p"); //选择body中的所有p元素 
const svg = body.select("svg"); //选择body中的svg元素 
const rects = svg.selectAll("rect"); //选择svg中所有的svg元素

如何绑定数据

D3 中是通过以下两个函数来绑定数据的：

datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定（常用）

现有如下内容

js 复制代码

<p>Apple</p> 
<p>Pear</p> 
<p>Banana</p>

1. datum()

假设有一字符串 China，要将此字符串分别与三个段落元素绑定，代码如下：

js 复制代码

var str = "China"; var body = d3.select("body"); 
var p = body.selectAll("p"); p.datum(str);
p.text(function(d, i){ return "第 "+ i + " 个元素绑定的数据是 " + d; });

其结果如下：

js 复制代码

第 0 个元素绑定的数据是 China

第 1 个元素绑定的数据是 China

第 2 个元素绑定的数据是 China

无名函数function(d, i)详解

当选择集需要使用被绑定的数据时，常需要这么使用。

两个参数：

d 代表数据，也就是与某元素绑定的数据。
i 代表索引，代表数据的索引号，从 0 开始。

2. data()

如下有一个长度为3的数组，将将数组的各元素绑定到三个段落元素上。

js 复制代码

cosnt dataset = ["I like dog","I like cat","I like snake"];

var body = d3.select("body"); 
var p = body.selectAll("p"); 

p.data(dataset) 
  .text(function(d, i){ return d; });

调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，结果如下：

js 复制代码

I like dog 
I like cat 
I like snake

插入与删除元素

1. 插入元素

append()：在选择集末尾插入元素
insert()：在选择集前面插入元素

append()

js 复制代码

body.append("p") 
    .text("append p element");

在 body 的末尾添加一个 p 元素，结果为：

js 复制代码

Apple
Pear
Banana
append p element

insert()

在 body 中 id 为 myid 的元素前添加一个段落元素。

less 复制代码

body.insert("p","#myid")
  .text("insert p element");

已经指定了 Pear 段落的 id 为 myid，因此结果如下。

css 复制代码

Apple
insert p element
Pear
Banana

2. 删除元素

删除一个元素时，对于选择的元素，使用 remove 即可，例如：

ini 复制代码

var p = body.select("#myid");
p.remove();

比例尺与坐标轴

比例尺

比例尺是用于将数据空间映射到图形空间的函数。它根据数据的范围和需求提供了一种转换关系，使数据可以在图形中正确地显示。D3.js提供了多种类型的坐标尺，常用的比例尺有：

d3.scaleLinear() 线性比例尺
d3.scaleTime() 时间比例尺
d3.scaleBand() 序数比例尺

比例尺，有定义域和值域，分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。

线性比例尺使用：

js 复制代码

// 定义输入数据范围 domain
const data = [0, 100];
 
// 定义输出范围（图形空间）range
const outputRange = [0, 500];
 
// 创建线性比例尺
const scale = d3.scaleLinear()
                .domain(data)         // 设置输入数据范围
                .range(outputRange);  // 设置输出范围
 
// 使用比例尺进行数据转换
const result = scale(50);   // 输出结果为 250

序数比例尺：

js 复制代码

// 定义输入数据范围 domain
const index = [0, 1, 2, 3, 4];
 
// 定义输出范围（图形空间）range
const color = ["red", "blue", "green", "yellow", "black"];
 
// 创建序数比例尺
const ordinal = d3.scaleOrdinal()
                .domain(index)         // 设置输入数据范围
                .range(color);  // 设置输出范围
 
// 使用比例尺进行数据转换
ordinal(0); //返回 red 
ordinal(2); //返回 green 
ordinal(4); //返回 black

坐标轴

坐标轴是用于在可视化中显示刻度线和标签的重要组件。

首先需要创建一个比例尺（scale），这是坐标轴的基础。
创建坐标轴生成器：
- d3.axisBottom() 底部水平坐标轴
- d3.axisTop() 顶部水平坐标轴
- d3.axisLeft() 左侧垂直坐标轴
- d3.axisRight() 右侧垂直坐标轴
将坐标轴应用到 SVG 元素上。

如下示例

js 复制代码

// 创建 SVG 容器
const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 创建比例尺
const xScale = d3.scaleLinear()
  .domain([0, 100])  // 输入范围
  .range([50, 450]); // 输出范围

// 创建坐标轴生成器
const xAxis = d3.axisBottom(xScale)
  .ticks(10) // 设置刻度数量
  .tickFormat(d => `${d}%`); // 格式化刻度标签

// 将坐标轴添加到 SVG 中
svg.append("g")
  .attr("transform", "translate(0, 250)") // 移动坐标轴位置
  .call(xAxis);

常用配置方法：

.ticks(count) - 设置刻度数量
.tickValues(array) - 自定义刻度值
.tickFormat(format) - 格式化刻度标签
.tickSize(inner, outer) - 设置刻度线长度
.tickPadding(padding) - 设置刻度标签与刻度线的间距样式自定义：可以通过 CSS 或直接操作 DOM 来定制坐标轴样式：

css 复制代码

.axis path,
.axis line {
  stroke: #999;
}

.axis text {
  fill: #666;
  font-size: 12px;
}

注意事项：

确保比例尺的 domain 和 range 设置正确
使用 transform 属性来定位坐标轴
可以通过 .call() 方法将坐标轴应用到选择集
坐标轴会自动根据比例尺的类型（线性、时间、序数）来调整显示方式