readme.md · shenyoujian2/d3

# D3js

# 一 概述

d3 是 **D**ata-**D**riven-**D**ocuments的缩写，是一个免费开源javascript库，用于创建动态的，可交互的数据可视化效果。

d3不是一个图表库，不能像echarts一样通过简单的配置或调用api来直接生成最终的图标。

d3相当于低级工具库，与svg配合优良，通过数据驱动轻松生成svg图形路径，比直接使用svg绘图要方便很多，而最终的图表效果也是通过生成的svg来绘制形成的。

d3也支持与canvas配合使用。

d3本身没有创建任何新的标签或语法来绘制图表，最终都是使用canvas和svg技术绘制图形。

d3遵循web标准，所以不需要其他框架的辅助，可以独立运行在浏览器中。

d3提供了丰富的API ， 可以轻松操作dom ，实现dom创建，删除，更新，查找等，与jquery比较相似。

d3提供了丰富的功能，可以使我们更轻松的实现一些复杂的图形效果， 如地图，树图，缩放，刷选等。

d3核心理念是数据驱动文档，将数据与dom标签对象绑定，对数据操作即可对dom对象操作。 与vue相似。

d3虽然不如echarts或一些其他的可视化图表库使用方便，但可以高度定制，按需设计。

# 二 安装使用D3

**1 本地引入**

git下载：https://github.com/d3/d3/releases

```html
<script src="../d3.js"></script>
<script>
	console.log(d3);
</script>
```

**2 cdn引入**

```html
<script type="module">
	import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
    console.log(d3);
</script>
```

* 官网提供了多种cdn引入方式
* 需要以模块化的方式使用

> 不需要模块化方式的cdn引入地址：https://d3js.org/d3.v7.min.js

**3 node安装**

```text
npm i d3
```

**4 observablehq平台在线使用**

可视化在线学习平台

类似于在线笔记本，可以云存储可视化作品，可以共享作品。

编写js片段，并可以即时运行这些代码并查看结果

集成了d3可视化库，可以直接使用d3

> 该平台有自己的一些语法规范， 所以对于初学者，还需要先了解这些新语法。

# 三 元素操作

## 1 selection对象

**d3操作元素时会产生一个selection对象，包含了我们操作的标签元素(多个)**

* 可能是已有的标签元素 （查找）
* 可能是新创建的标签元素（新建）

**查找已有的标签元素**

```javascript
const selection = d3.select(..)
const selection = d3.selectAll(..)
```

* 方法可以传递选择器，根据选择器找到匹配的元素，并包装成selection
* 方法可以传递dom对象，包装成selection
* selection可以使用select 和 selectAll方法继续查找子级标签

**新建标签元素**

```javascript
const selection = d3.create('div');
```

* 需要配合insert ， append才能在窗口中展示新标签效果。

**获得selection中包含标签元素的个数**

```javascript
selection.size(); // 3
```

**遍历每一个标签元素**

```javascript
selection.each(function(d,i){
    //d 是后面要讲到的给元素绑定的数据，目前是undefined (暂时忽略)
    //i 元素下标
    //this 就是当前元素
    console.log(d , i , this);
})
```

* 这里不要使用箭头函数，否则this无法表示标签元素。

**获得包含的所有标签元素**

```javascript
const node = selection.node(); // 获得第一个p
const nodeList = selection.nodes() //[p,p,p]
```

* 获得selection中包含的元素对象。

## 2 添加(放置)元素

**放置元素在末尾**

```javascript
const selection = d3.select('body') ;

const selection1 = selection.append('input') ;//在selection末尾增加一个新标签
const selection1 = selection.append(function(){
    return element ; //标签元素 (新，旧)
})
```

**插入元素在指定的位置**

```javascript
const selection1 = selection.insert('input') ; // 等价于append  插入在末尾
const selection1 = selection.insert('input','selector') ;//在selection中指定的selector前面插入新元素
const selection1 = selection.insert(()=>{return element},'selector')
```

> append 和 insert 在新建元素，放置元素的同时，也产生了一个selection对象

## 3 删除元素

```javascript
selection.remove(); //删除找到的标签  d3.select('#i1').remove()
```

## 4 修改元素

修改元素的属性，样式，内容，事件

**操作属性**

```javascript
selection.attr('name') ;//获得第一个元素的name属性值

selection.attr('name','dmc') ;//为selection中所有元素的name属性赋值，同时返回selection对象
selection.attr('name',function(){ return value ;})
```

* 当value是一个函数的时候，selection中每一个元素属性赋值时都会调用这个函数，将函数的返回值作为属性值。
* 接下来元素绑定数据时，比较常用这种方式为属性赋值
* 每一个元素赋值调用函数的时候都会传递3个参数 
  * d 当前元素绑定的数据 （暂时没有）
  * i 元素下标
  * nodeList 装载selection中这一组的元素， nodeList[i] 就是当前元素
* 如果不是箭头函数， this也表示当前这个元素。

**操作样式**

```javascript
selection.style('border') ;//获得第一个元素的指定样式

selection.style('border','2px solid #ccc') ;//设置样式
selection.style('border',function(){ return str ;})
```

```javascript
d3.selectAll('div')
    .data(['red','green','blue'])
    .style('margin','10px')
    .style('padding','10px')
    .style('width','200px')
    .style('border','1px solid #ccc')
    .style('background',function(d){
        return d;
    })
```

**操作内容**

```javascript
selection.html() //获得第一个元素的html内容
selection.text() //获得第一个元素的text文本内容

selection.html('<input />');
selection.html(function(){return '<input />'})
```

**操作事件**

```javascript
selection.on('click',function(e,d){})
```

* e 事件对象。 e.target 指向触发当前事件的元素。 如果是function函数，等价于this。

* d 当前元素绑定的数据 （暂时忽略）

# 四 数据绑定

## 1 数据应用

数据与标签逻辑上的关联

```javascript
const array = ['zs','li','dmc'] ;
        
const selection  = d3.selectAll('div')
array.forEach((e,i)=>{
    selection.filter(`:nth-child(${i+1})`).text(e)
})
```

## 2 datum数据绑定

为selection包含的所有元素绑定相同的数据。

```javascript
const selection = d3.selectAll('div');
selection.datum('dmc')
selection.text(function(d,i){
    console.log(d,i);
    return d + (i+1);
});
selection.attr("id",(d,i)=>d+(i+1)) 
//--------------------------------------------------
const selection = d3.selectAll('div')
                    .datum('dmc')
                    .text(function(d,i){
                        console.log(d,i);
                        return d + (i+1);
                    });
                    .attr("id",(d,i)=>d+(i+1)) 
```

> 在修改标签时，既可以传递具体的值，也可以传递函数，函数的返回值即为修改后的值
> 如果传递的是一个函数，这个函数被调用时，会传递标签绑定的数据，可以基于绑定的数据返回结果。

## 3 data数据绑定

为selection包含的元素绑定各自对应的数据

```javascript
const array = ['zs','ls','dmc'];
const selection = d3.selectAll('div')
selection.data(array);
selection.text((d,i)=>{
    console.log(d,i);
    return d ;
});
selection.attr('id',d=>d);

d3.selectAll('div').attr('class',d=>d);
```

* 默认按照下标匹配来绑定数据  datas[0] --- 绑定 --- elements[0]

* 数据绑定在标签对象中(`__data__属性`）， 重复获得标签对象， 绑定的数据依然存在

## 4 数据key映射

将数据与标签匹配。

内部的匹配机制：

* 绑定数据时，会依次遍历selection中的所有标签元素 和 数据源
* 遍历过程中，会调用一个key函数，函数的返回值即为当前数据的key，默认返回的是下标

* 根据key，将数据绑定在对应的镖旗

可以提供key函数，自定义映射机制。

```javascript
//d 就是当前的数据  （遍历元素时，d=undefined）
//i 是下标 ， 元素和数据有各自的下标
//list 当前内容所属的集合   （数据 list是数组， 元素 list就是NodeList集合
key = function(d , i , list){
    
}

d3.selectAll('div').data(array,key);
```

```html
<div class="orange"></div>
<div class="banana"></div>
<div class="apple"></div>

d3.selectAll('div')
        .data(array,function(d,i,list){
        	//d 不是undefined ， 说明遍历的是数据，用数据值作为key 分别是  app ora ban
        	//d 是undefined，说明遍历的是标签元素，用class值作为key，分别是ora ban app 
            return d ? d : this.classList[0];
        })
        .text(d=>d)

</script>
```

## 5 enter() exit()

当数据与标签 数量不配时，通过这些函数对多余的标签 和 数据做处理

* 数据多了，需要增加标签（apped)
* 标签多了，需要删除多余标签(remove)

**enter()**

获得多余的数据，配合append方法，将多余的数据绑定在新添加的标签中。

```html
<div>1</div>
<div>2</div>
<div>3</div>

const selection = d3.select('body').selectAll('div')
    .data(array)
    .text(d=>d)
    .enter()
    .append('div')
    .text(d=>d)
</script>
```

**exit()**

获得多余的标签，配合remove方法，删除这些多余的标签

```html
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

> 如果设置了自定义key函数，exit方法最终返回的是没有匹配的那部分多余的标签元素。

## 6 data-join

**三种数据绑定状态**

* update    数据数量 = 标签数量 ， 数据重新绑定
* enter       数据数量 > 标签数量，获得多余数据（新增标签并绑定）
* exit          数据数量 < 标签数量 ，获得多余标签（删除标签）

**join() 会自动检测数据状态，并针对于不同的状态自动完成对应的操作**

* 需要传递一个参数，指定enter状态时，新增的标签名称 `join('div')`

```javascript
d3.select('body')
  .selectAll('div')
  .data(array)
  .join('div')
  .text(d=>d)
```

**join()还可以传递三个函数参数，分别表示enter， update， exit状态的操作函数**

* 三个函数表示自定义的状态处理
* d3在数据绑定时，会根据不同的状态，调用对应的函数
* 调用函数时，会传递selection对象，包含对应状态的内容。
* 通过selection自定义三种状态的处理
* 返回处理结果(selection)
* 需求：正常绑定的数据，div背景设置为red 。 多余数据绑定新增的div，设置背景green。多余的标签设置背景蓝色

```javascript
d3.select('body')
    .selectAll('div')
    .data(array,(d,i)=>d?i+1:i)
    .join(
        (selection)=>{
            console.log('enter',selection);
            return selection.append('div').style('background','green');
        },
        (selection)=>{
            console.log('update',selection);
            return selection.style('background','red')
        },
        (selection)=>{
            console.log('exit',selection);
            return selection.style('background','blue').remove()
        }
    )
    .text(d=>d)
```

![1688367096834](images/09.png)

## 7 多重数据绑定

**数据绑定及绑定数据的应用**

* 数据绑定，会将数组中的每一个数据与标签绑定， 存储在标签对象的`__data__`属性中
* 修改标签时（attr , style , text 等）， 如果提供的是一个函数
* 底层遍历处理selection包含的标签元素时，每一次都会调用这个函数，并将当前标签绑定的数据作为参数传递给这个函数
* 我们可以利用这个参数提供最终的修改结果

**多重数据绑定**

* 数据结构比较复杂，一般都是数组中还包含了子数组

* 在第一层数据绑定后，修改当前标签或子标签时，都会传递绑定的数据，可以根据需要使用这个数据

* 也可以为子标签再次绑定数据，绑定的可以是新的数组，也可以是当前绑定数据中的子数组，这样子标签绑定的就是新的数据了。

```text
  divs--绑定--[ [1,2] , [11,22] , [111,222] ]
  	div -- 绑定-- [1,2]
  	div -- 绑定-- [11,22]
  	div -- 绑定-- [111,222]
  		div.attr('name' , function(d){}) ;
  		d == [111,222]
  		
  		div.append('span').attr('name',function(d){}) 
  		div的子标签span也可以使用[111,222]
  		
  		div.selectAll('span').data(d=>d).join('span')
  		div所有的子标签绑定d这个数组的每一个内容
  		span使用的就不再是[111,222]这个数组了，而是其中的111或222具体的数值
  ```

```javascript
const data = [
    {province:'黑龙江',cities:['哈尔滨','齐齐哈尔','牡丹江','佳木斯']},
    {province:'吉林',cities:['长春','吉林','松原','延边']},
    {province:'辽宁',cities:['沈阳','大连','鞍山','铁岭']},
]

// const selection = d3.select('body')
//   .selectAll('dl')
//   .data(data)
//   .join('dl')

// selection.append('dt')
//   .text(d=>d.province)

// selection.selectAll('dd')
//   .data(d=>d.cities)
//   .join('dd')
//   .text(d=>d)

const selection = d3.select('body')
.selectAll('dl')
.data(data)
.join('dl')
.call(dl=>{
    dl.append('dt')
      .text(d=>d.province)
})
.call(dl=>{
    dl.selectAll('dd')
      .data(d=>d.cities)
      .join('dd')
      .text(d=>d)
})
```

# 五 比例尺

可视化图形设计的辅助工具

作用是将真实数据映射成可视化数据

例如：将[0,300] 映射到 [0,600]范围

150 对应的可视化数值就是 300

比例尺映射条件包括2部分：

* 值域：真实数据范围

* 范围：可视化数据范围

值域 和 范围 有可能是连续的，也可能是非连续的。

d3提供多种api，用来创建不同类型的比例尺

比例尺本身是一个函数，通过函数实现映射

## 1 linear scale 线性比例尺

值域 和 范围都是连续的

**创建比例尺**

* 需要传递两个数组参数
* 第一个数组是值域的最小值和最大值
* 第二个数组是可视化范围的最小值和最大值

```javascript
const x = d3.scaleLinear([0,300] , [0,600]);
```

**使用比例尺映射**

* 将真实数据映射成可视化数据

```javascript
x(150) ;//300
x(300) ;//600
```

**反向映射**

* 将可视化数据映射成真实数据

```javascript
x.invert(600) ;//300
x.invert(300) ;//150
```

**边界控制**

* 默认即使超过边界，也可以按照比例尺进行映射。

* 可以使用clamp函数控制边界

```javascript
//未开启边界控制时，超出边界的映射
x(400);//800
x.clamp(true);
//开启边界控制时，超出边界的映射
x(400);//600
```

**使用domain( [min,max] )  和 range( [min,max] ) 分别设置值域 和 范围**

* 传参是设置值域和范围
* 没有传参可以获得值域和范围

```javascript
x.domain([0,300]);
x.range([0,600]);

x.domain();//[0,300]
x.range();//[0,600]
```

**快速计算一组数据中的最大值和最小值**

```javascript
const array = d3.extent([100,60,90,130,80,150,90]) ;//[60,150]

const data = [
    {name:'zs1',score:100},
    {name:'zs2',score:60},
    {name:'zs3',score:80},
    {name:'zs4',score:120},
    {name:'zs5',score:90},
    {name:'zs6',score:150},
    {name:'zs7',score:70}
]
d3.extent(data,d=>d.score)

d3.max([100,60,90,130,80,150,90]) ;//150
d3.max(data,d=>d.score);
d3.min(...);
```

**分段比例映射**

* 给值域和范围提供多个数值
* 分段映射

```javascript
const x = d3.scaleLinear()
	.domain([0,200,300])
	.range([0,300,600])

x(100);// 150
x(250);// 450
```

**范围优化**

```javascript
[1.1 , 19.6] --> [0,300]
const x = d3.scaleLinear([],[]).nice();
[0 , 20] --> [0 , 300]
```

**获得部分值域刻度**

```javascript
x.ticks(count) ; //获得指定数量的刻度值(数组)
```

* 实际获得的刻度数量可能和指定的数量不一致
* 默认count = 10 ;

## 2 time scale 时间比例尺

值域是时间范围， 最终也是映射到可视化的数据范围中

这个时间范围也是连续的。

**创建并使用比例尺**

```javascript
const x = d3.scaleTime( [] , [] )
	.domain([new Date('2020-01-01 00:00:00') , new Date('2020-01-01 23:59:59')])
	.range([0,600])

x(new Date('2020-01-01 12:00:00'))
```

**时间刻度的格式化**

```javascript
x.ticks().map(d3.timeFormat('%d %H'))
```

```text
%a - 周的缩写 Wed
%A - 周的全写 Wednesday
%b - 月份缩写 Jan
%B - 月份全写 January
%d - 月中的第几天.
%H - 24小时制 [00,23].
%I - 12小时制 [01,12].
%m - 月份数字 [01,12].
%M - 分钟 [00,59].
%s - 秒.
%y - 年份 [00,99].
%Y - 完整年份 1999.
```

更多日期格式化见官方文档：https://d3js.org/d3-time-format#locale_format

**自定义时间间隔**

```javascript
x.ticks(d3.timeHour.every(1))
```

* 默认提供数字， 获得的是指定数量的刻度值
* 也可以指定时间间隔， 获得每个间隔的刻度值
* 可以指定的时间种类有多种：

![1688459034651](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1688459034651.png)

## 3 ordinal scale 序数比例尺

值域和范围都是非连续的（离散点）

比较常用的就是颜色的映射

**创建和使用比例尺**

```javascript
const x = d3.scaleOrdinal( [] , [])
	.domain(['香蕉','橘子','苹果'])
	.range(['yellow','orange','red'])

x('香蕉') ;//yellow
```

**设置未知映射**

```javascript
x.unknow('#ccc');
x('葡萄') ;//#ccc
```

**使用d3提供的配色方案**

```javascript
const x = d3.scaleOrdinal( [] , [])
	.domain(['香蕉','橘子','苹果'])
	.range(d3.schemeCategory10)
```

![1688461109617](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1688461109617.png)

> 两个颜色之间也可以是连续的，可以配合具有连续特点的比例尺来使用。

## 4 quantize scale 量化比例尺

值域是连续的，范围是非连续的

会对连续的值域空间分段，每一段对应范围的一个离散值

如： 0-60 及格 ， 60-80 良好 ， 80-100 优秀

**创建和使用比例尺**

```javascript
const x = d3.scaleQuantize()
	.domain([0,30])
	.range(['red','green','blue'])

x(5) ;//red
x(8) ;//red
x(15);//green
x(20);//blue
```

* 内部分分段是左闭右开。

**反向映射获得的是一个数组，表示分段空间**

```javascript
x.invertExtent('red') ;// [0,10]   10是取不到的。
```

**获得分段的阈值**

```javascript
x.thresholds();//[10,20]
```

## 5 band scale分段比例尺

条带比例尺

值域是非连续的， 范围是连续的

由于可视化数据会影响图形绘制， 所以对每一段可视化数据需要了解更多的信息。如：其实数据，宽度等

多用来绘制柱状图

**创建和使用比例尺**

```javascript
const data = [{type:'金牌',count:50},....]
const x = d3.scaleBand()
	.domain(['金牌','银牌','铜牌'])
	.range([0,600])

x('金牌');//0
x('银牌');//200
x('铜牌');//400
```

* 使用比例尺获得是对应条带(分段)起始数值

**获得分段步长(宽度)**

* 获得从一段的起点到下一段起点之间的距离

```javascript
x.step(); // 200
```

**获得条带宽度**

* 去除留白后的，可以绘制图形的区域宽度。默认与step相同

```javascript
x.bandwidth(); // 200  0-200
```

**设置每段之间的留白**

* 设置每个条带两端的内边距
  * paddingOuter 两端的留白，会影响step的宽度
  * paddingInner 条带之间的留白，会影响bandwidth的宽度
* 留白的控制使用的是比例

```javascript
x.padding(0.1) ;
```

**数值取整**

* setp， width有可能出现小数

* 利用round方法可以做取整的处理

```javascript
x.round(true);
```

# 六 坐标轴

**创建坐标轴对象(函数)**

* 此时还没有真正的绘制坐标轴
* 只负责设置坐标轴的一些信息(长度，方向，刻度等)
* 需要传递一个比例尺。 这个比例尺必须有连续的范围
  * 比例尺的范围即为坐标轴长度
  * 比例尺的值域即为坐标轴的刻度范围
  * 比例尺的刻度即为坐标轴的刻度

```javascript
const scale = d3.scaleLinear([2,33],[0,500]).nice()
const axis = d3.axisLeft(scale) ; //axisBottom() , axisRight() , axisTop()
```

**绘制坐标轴**

* 只需要提供绘制的位置即可(svg , g)
* 默认从0,0原点绘制。 可以通过设置父级标签(g)的transform，将坐标轴移动到画布的指定位置
* 更改比例尺，坐标轴不会自动重绘，需要手动重绘。

```javascript
axis(svg)
svg.call(axis);
```

**刻度设置**

```javascript
axis.ticks(5) ;//设置刻度的数量
axis.tickValues([0,5,10,15,20,25,30]);//自定义刻度
axis.tickFormat(d3.timeFormat('%H'))
```

**刻度线设置**

```javascript
axis.tickSize(10); //设置刻度线的长度  包含 tickSizeInner , tickSizeOuter , 负值反向
axis.tickPadding(10); // 设置数字与刻度线之间的留白
axis.offset(10) ;//刻度线与中线之间的距离
```

> 可以css控制坐标轴的一些样式细节。
>
> 如：设置刻度字体大小，刻度线粗细，颜色等。

```css
.tick text{
    font-size:12px;
}
```

# 七 d3-tip工具

基于d3的可视化提示工具

不是d3自带的，使用时需要引入

* github下载：https://github.com/bumbeishvili/d3-v6-tip
* node安装： npm i d3-v6-tip

**创建tip工具**

```javascript
const tip = d3.tip()
```

**启用tip工具**

* 将tip工具作用在svg标签上。 这样svg中的所有子标签都可以使用tip工具

```javascript
svg.call(tip);
tip(svg);
```

**使用tip工具**

* 开启tip工具的所有子标签都可以使用tip工具

```javascript
svg.selectAll('circle')
	.on('mouseover',tip.show)
	.on('mouseout',tip.hide)
```

**设置tip**

```javascript
tip.html((e,d)=>{return `<div>奖牌数:${d}</div>`}) ;//设置展示的内容
```

* e 触发的事件对象，包含对象源
* d触发事件标签绑定的数据

```javascript
tip.attr('class','d3-tip') ;//设置内置的类选择器，使得样式生效。
```

* 需要引入d3-tip.css

```javascript
tip.direction('n');//设置提示展示的方向  四面八方 n, s, e, w, nw, ne, sw or se
```

```javascript
tip.offset([top,left]) ; //设置提示与原图形位置偏移。默认在(方向)中间位置
```

# 八 图形生成器

根据可视化数据，快速生成较为复杂的path路径。如：弧， 线段，曲线，饼图，环等

## 1 arc 弧生成器

**创建生成器**

```javascript
const arc = d3.arc();
```

* 生成器本身是一个函数

**使用生成器**

* 使用生成器，提供所需的数据，生成弧图形的路径
  * 所需数据包含：起始弧度，结束弧度，外半径，内半径

```javascript
const d = arc({
    startAngle:0,
    endAngle:Math.PI/2,
    outerRadius:200,
    innerRadius:0
})

//d : 'M0,-200A200,200,0,0,1,200,0L0,0Z'
path.attr('d',d); //绘制图形
```

* 从 0,0原点开始生成路径
* 角度是与y轴负方向的夹角
* 逻辑上提供的是角度， 但实际计算时使用的是弧度。 
  * 上述代码中  startAngle 是0弧度 ， endAngle是Math.PI/2弧度（90°）

**统一设置弧信息**

* 在绘制多个弧图形时，有些信息是不变的。

```javascript
arc.innerRadius()
	.outerRadius()
	.startAngle()
	.endAngle()
```

**设置弧两端的留白**

* 角度和半径可以控制留白距离
  * 角度和半径越大， 留白越大。 反之越小
  * 角度默认为0，所以角度一定要设置。 半径有默认值可用。
* 产生留白后的弧形 与 之前的弧形两端平行,直到内弧消失，弧形状才会变化。

```javascript
arc.padAngle(Math.PI/8);
arc.padRadius(200) ;
```

**设置弧的圆角**

* 弧的4个断点也设置成弧线。

```javascript
arc.cornerRadius(10)
```

**获得弧的中心位置**

* 获得的是一个坐标，由x和y组成
* 需要传递弧的信息，根据信息计算中心点的位置

```java
const [x,y] = arc.centroid({....})
```

## 2 pie 饼生成器

不是用来生成路径的。

根据可视化数据，生成弧形数据(startAngle , endAngle)

配合弧生成器， 快速绘制饼图或环形图。

**创建饼生成器**

```javascript
const pie = d3.pie();
```

**生成弧数据**

```javascript
const array = pie(data)
```

* 生成的数据数量与原始数据的数量相同
* 新数组包括
  * data 当前位置的数据
  * startAngle和endAngle
  * index顺序，影响角度顺序，最终会影响环形图顺序

**指定用于角度计算的属性值**

* 当数据是对象形式存在时,指定用来计算角度的属性值。

```javascript
const data = [
    {name:'zs',score:100},
    {name:'ls',score:90},
    {name:'ww',score:80},
    {name:'zl',score:85},
    {name:'dmc',score:95},
    {name:'zzt',score:60},
]

pie.value(d=>d.score)
```

**排序**

```javascript
pie.sort( function(a,b){ return a.score - b.score} )
```

* 比较器函数每次会按顺序传递数组中的两个数据
* 根据返回值比较大小
  * `<0  a < b`
  * `=0  a = b`
  * `>0  a>b`

* d3中提供了比较器函数

`d3.ascding(a.score,b.score)` 升序

`d3.descending(a.score,b.score)` 降序

**设置留白角度**

```javascript
pie.padAngle(0.1);
```

**设置开始角度和结束角度**

* 默认第一个图形的角度从0开始，是y轴负方向
* 可以通过设置开始角度，控制第一个图形的起始位置

```javascript
pie.startAngle(Math.PI/2);
pie.endAngle(Math.PI*2 + Math.PI/2)
```

## 3 line 线条生成器

根据提供的数据，确定连线中的每一个点，自动生成path路径。

**创建生成器**

```javascript
const line = d3.line(x , y)

const line = d3.line()
	.x(x)
	.y(y)

const x = function(d){
    return xScale(d.date) ;
}
```

* x 和 y函数(处理器) 用来计算data中每一个数据对应点的x 和 y坐标
* line生成器执行时，会遍历data中的每一个数据
* 每一个数据都会调用指定的x函数，获得x坐标， 调用指定的y函数，获得y坐标

**使用生成器**

```javascript
line(data) ;
```

**设置曲线连接**

```javascript
line.curve(d3.curveMonotoneX)
```

* d3.curveLinear   直线(默认)
* d3.curveStep 阶梯线
  * curveStepAfter
  * curveStepBefore
* d3.curveBumpX  曲线经过每一个点，形成x方向的切线
  * d3.curveBumpY
* d3.curveNatural 自然曲线，经过所有的点
* d3.curveBasis 基本样条曲线  曲线可能不经过点。

* 更多曲线见官方文档：https://d3js.org/d3-shape/curve#curveCatmullRomOpen

## 4 area 区域生成器

* 简单而言，线条生成器，是每一个数据都会产生一个点，将多个点连成线。区域生成器，每一个数据可以产生2个点。每两个数据就会形成一个合围的区域（4个点）

**创建并生成器**

```javascript
const area = d3.area()

area(data);
```

**数据处理器**

* 线条生成器需要提供2个处理器，分别是通过数据处理获得点的x和y坐标
* 区域生成器就需要4个处理器，分别通过数据处理获得两个点的x0和y0坐标， x1和y1坐标

```javascript
area.x0( x0 );
area.y0( y0 );
area.x1( x1 );
area.y1( y1 );

area.x( x ) ;//x0 和 x1 使用相同的处理函数  结果x0=x1
area.y( y ) ;//结果 y0 = y1

//x0函数
//d为area处理数据时的每一个数据对象
//value即为根据d处理后的坐标值
function x0(d){
    return value;
}
```

**线条设置**

```javascript
area.curve(d3.curveStep);
```

## 5 stack 堆叠数据生成器

不是用来生成路径

根据原始数据，产生新结构的数据

使用新结构的数据实现堆叠的可视化效果

**堆叠数据的结构**

初始数据

```text
 const data = [
     {company:'阿里',type:'电子产品',sale:125},
     {company:'阿里',type:'服装',sale:352},
     {company:'阿里',type:'食品',sale:520},
     {company:'京东',type:'电子产品',sale:438},
     {company:'京东',type:'服装',sale:85},
     {company:'京东',type:'食品',sale:266},
     {company:'拼多多',type:'电子产品',sale:92},
     {company:'拼多多',type:'服装',sale:316},
     {company:'拼多多',type:'食品',sale:283},
 ];
 
 或
 
 const data = [
 	{company:'阿里',电子产品:125,服装:352,食品:520},
 	...
 ]
```

使用stack完成数据堆叠处理，效果如下：

```text
[
	[key:电子产品
		[阿里0,125],
		[京东0,438],
		[拼多多0,92]
	],
	[key:服装
		[阿里125,352+125=477],
		[京东438,85+438=523],
		[拼多多92,316+92=408]
	],
	[key:食品
		[阿里477,520+477=997],
		[京东523,523+266=789]
		[拼多多408,408+283=692]
	],
]
```

**创建和使用生成器**

```javascript
const stack = d3.stack()
const array = stack(data)
```

* 不是随便的数据就可以处理，要满足一定的要求
  * 需要指定堆叠的key，表示哪类数据需要堆叠， 顺序后面可以控制。
  
  * 要确保在一条记录中可以找到所有key所对应的数据。
  
    上述数据结构中，第一个数据就不符合条件，需要处理后再堆叠

**堆叠设置**

```javascript
stack.keys(['电子产品','服装','食品']) ;
```

* 指定堆叠的所有key，数据堆叠处理时，会根据这些key找到对应的数据，并堆叠

```javascript
stack.value( fn )
```

* 当使用指定的key，可以从当前数据中取出指定的值，就可以直接堆叠计算
* 如果使用当前的key，不能直接取出数据 需要使用value函数，来提供value获取器，指定具体获得value值过程

```javascript
const data = [
 	{company:'阿里',电子产品:125,服装:352,食品:520},
 	{company:'京东',电子产品:438,服装:85,食品:266},
 	{company:'拼多多',电子产品:92,服装:316,食品:283},
 ]
const stack = d3.stack()
	.keys(['电子产品','服装','食品']) 
stack(data)
```

**数据排序**

```javascript
stack().order( d3.stackOrderNone)
```

* `d3.stackOrderNone`默认  按照keys顺序

* `d3.stackOrderReverse` 按照key的反顺序

* `d3.stackOrderAscending` key对应数据的总数升序

* `d3.stackOrderDescending` key对应数据的总数升序

> 设置不同的排序方式，堆叠数据的最大值所在的位置也会改变
>
> 最终以index顺序为准， 不以数组下标位置为准

```javascript
const y = d3.scaleLinear()
	//.domain([0 , d3.max(array[array.length-1] ,d=>d[0] ) ])
    .domain([0,d3.max( array.filter(d=>d.index==array.length-1)[0] , d=>d[1] )])  
    .range([400 , 0])
    .nice()
```

**数据分组处理**

* 将一些无法直接堆叠的数据，进行分组，使得可以堆叠
  * 允许堆叠数据的特点是：在一条记录中，所有的key都可以找到与之对应的数据
  * 有些结构简单，通过key可以直接获得数据
  * 有些结构复杂，需要一些列处理才可以找到key对应的数据

```javascript
d3.group(data,d=>d.company)//按照指定的key进行分组
```

* 此时在使用stack数据堆叠时，无法直接根据key="电子产品"找到对应的数据,需要一定的查找逻辑
* 此时使用stack.value函数指定查找逻辑
  * value函数会传递4个参数，前两个比较重要

```javascript
stack.value(function(array,key){
    const arr = array[1]
    for(let i=0;i<arr.length;i++){
        if(arr[i].type == key)
            return arr[i].sale;
    }
})
```

```javascript
//按照指定的多个key一直分组,先按照企业分组，每一个企业中的所有数据再按照产品类型分组
d3.index(data,d=>d.company,d=>d.type);
```

```javascript
stack.value(function(array,key){
    return array[1].get(key).sale
})
```

## 6 lineRadial径向线生成器

理解成line生成器翻版

line 会根据数据和比例尺，直接计算出每一个点的x,y坐标，连线

lineRadial 会根据数据和比例尺，计算出每一个点位置的角度和半径 （基于原点+y轴负方向），连线

**创建设置并使用生成器**

```javascript
const lr = d3.lineRadial()
	.angle( fn(d) )
	.radius( fn(d) )
	.curve( d3.curveLinear )

lr(data)
```

* d 是 data中的每一条记录
* 通过我们传递的函数，根据d计算每条记录对应的角度和半径。

```javascript
const angleScale = d3.scaleTime()
.domain(d3.extent(data,d=>new Date(d.date)))
.range([0 , Math.PI * 2 ])

const raduisScale = d3.scaleLinear()
.domain(d3.extent(data,d=>d.avg))  
.range([150,200])

const lr = d3.lineRadial()
.angle( d=>angleScale(new Date(d.date)) )
.radius( d=>raduisScale(d.avg) )
.curve( d3.curveNatural)

const d = lr(data)  ;
```

## 7 areaRadial径向区域生成器

area区域图翻版

将x0,y0 , x1 , y1的计算 转换成角度和半径的计算

* `x0---startAngle`
* `x1---endAngle`
* `y0---innerRadius`
* `y1---outerRadius`
* `x---angle    startAngle == endAngle`
* `y---radius   innerRadius == outerRadius`

**创建设置使用生成器**

```javascript
const angleScale = d3.scaleTime()
.domain(d3.extent(data,d=>new Date(d.date)))
.range([0 , Math.PI * 2 ])

const radiusScale = d3.scaleLinear()
.domain([d3.min(data,d=>d.min) , d3.max(data,d=>d.max)])  
.range([150,200])

const ar = d3.areaRadial()
    .angle(d=>angleScale(new Date(d.date)))  
    .innerRadius(d=>radiusScale(d.min))
    .outerRadius(d=>radiusScale(d.max))

const d = ar(data);
```

## 8 symbol符号生成器

绘制一些小图标

```javascript
const symbol = d3.symbol(type,size)
const d = symbol();
```

* 图形默认从0,0原点开始绘制。
* type：有一些列的type类型，主要分2部分 symbolsFill , symbolsStroke 。都是数组，包含了适合的图标
  * `d3.symbolCircle`
  * `d3.symbolSquare`
  * `d3.symbolStar`
  * ......
* size：设置图标(面积)大小

## 9 path 自定义路径

使用`d3.path()`生成一个path对象 （实际是 CanvasPathMethods对象）

其提供了与canvas2D 类似的绘图方法

```text
path.moveTo(x,y)
path.lineTo(x,y)
path.arc(x , y , r , startAngle , endAngle , anticlockwise)
path.rect(x,y,width,height)
path.quadraticCurveTo(cx,cy,x,y);
path.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);
path.closePath()
```

* context.beginPath() , context.save() , context.stroke() 等都不属于图形路径绘制方法。

```javascript
const context = d3.path();
context.moveTo(0,0);
context.lineTo(10,0);
context.lineTo(10,-5);
context.lineTo(20,3);
context.lineTo(10,11);
context.lineTo(10,6)
context.lineTo(0,6);
context.closePath()

svg.append('g').attr('transform','translate(400,300)')
    .append('path')
    .attr('d',context.toString())
    .attr('fill','none')
    .attr('stroke','#666')  
```

## 10 canvas图形绘制

每一个路径生成器，都有一个context方法。可以用来传递canvas的context对象，就相当于拿context绘制了对应的图形。

我们只需要通过context设置状态，实现填充或描边操作即可。

```javascript
arc.context(context);
line.context(context);
area.context(context);
...
```

```javascript
const arc = d3.arc() 
    .innerRadius(100)
    .outerRadius(200)
    .padAngle(0.1)
    .cornerRadius(10)

const canvas = document.createElement('canvas')
canvas.width = width ;
canvas.height = height ;
canvas.style.border = '2px solid #00f';
document.body.append(canvas);

const context = canvas.getContext('2d');
context.save();
context.translate(400,300)
context.beginPath();
context.strokeStyle = '#fac' ;
context.strokeWidth = 2 ;
context.fillStyle = '#acf' ;
//一切准备就绪了，准备绘制一个弧路径时
//设置context对象，表示使用d3的弧生成器来绘制canvas图形
arc.context(context);
//开始绘制，此时返回值d没有意义，相当于在arc方法内部，调用了context.moveTo,arc等方法
let d = arc({
    startAngle:0,
    endAngle:Math.PI/2,
})
//图形路径绘制完毕，选择填充或描边。
context.stroke();
context.fill()
```

# 九 过渡动画

## 1 动画实现过程

* 选择需要动画元素
* 创建动画对象
* 动画时间设置（持续时间，延迟时间）
* 动画效果设置（属性，样式，文本）

```javascript
g.select('circle')
    .transition()
    .duration(2000)
    .delay(1000)
    .attr('r',200)
```

## 2 selection与transition对象

selection是d3应用的基本对象。 select , selectAll , append , insert等方法创建。

通过调用transition()方法，就可以创建一个transition对象，包含了标签元素，可以对包含的元素进行过渡处理

所以transition与selection有类似的方法

* select() , selectAll()  基于transition现有的标签，寻找子标签元素
* attr() , style() , text()

```javascript
const data = ['a','b','c','d'] ;
const colorScale = d3.scaleOrdinal()
    .domain(data)
    .range(d3.schemeSet3)
const g = svg.append('g').attr('transform','translate(100,100)')

g.selectAll('circle')
    .data(data)
    .join('circle')
    .attr('cx',(d,i)=>i*100 + 50)
    .attr('cy',50)
    .attr('r',45)
    .attr('fill',d=>colorScale(d))

g.transition()
    .duration(2000)
    .attr('transform','translate(100,300)') 
    .selectAll('circle')
    .transition(2000)
    .delay((d,i)=>i*1000)
    .attr('fill',(d,i)=>i===data.length-1?colorScale(data[0]):colorScale(data[i+1]))
```

> transition对象不能重复动画， 要开启新动画， 需要创建新的transition对象。

## 3 控制动画

**中断动画**

```javascript
selection.interrupt()
```

```javascript
circles.on('click',(e,d)=>{
    //终止之前的动画
    circles.interrupt()
    //开启新动画
    d3.select(e.target)
        .transition('a')
        .duration(3000)
        .attr('cy',350)
})
```

**监控动画**

```javascript
transition
	.on('start' , (d,i,list)=>{} )
	.on('interrupt' , (d,i,list)=>{})
	.on('end' ,(d,i,list)=>{} )
```

* list[i] 就是触发当前监控事件的标签对象
* 如果使用function函数，this就是触发事件的标签对象。

```javascript
circles.on('click',(e,d)=>{
    //终止之前的动画
    circles.interrupt()
    d3.select(e.target)
        .transition('a')
        .duration(3000)
        .attr('cy',350)
        .on('interrupt',function(d,i){
            d3.select(this).attr('fill','#ccc')
         })
        .on('end',(d,i,list)=>{
           d3.select(list[i]).attr('fill','steelblue')
         })
})
```

**动画命名**

```javascript
selection.transition('a')
```

* 如果没有命名，会认为是两个相同名字的动画
* 相同名字的动画，后者会覆盖前者。 后者执行时，前者停止。
* 如果需要两个动画同时执行，就要为不同的动画设置不同的名字。

## 4 缓动函数

控制动画过程中属性变化的速率 （匀速，先快后慢，先慢后快，先快后慢再快 等）

```javascript
tansition.ease(缓动函数)
```

`d3.easeLinear 匀速`

`d3.easeExpIn  先慢后快（指数）`

`d3.easeExpOut 先快后慢`

`d3.easeExpInOut 先慢后快再慢`

`d3.easeBounceIn 弹跳式`

更多的缓动函数见官方文档：https://d3js.org/d3-ease#_ease

**缓动函数机制**

* 默认会存在一个比值： 时间与距离   
  * 2s时间  实现cx 从 100-500的变化     2s/400
* 在运动过程中，会不停的调用缓动函数，并传递一个比例t  [0,1] ，表示时间比例
  * 目前已经执行的时间与总时间比值  0.5s/2s = > t = 0.25
  * 在根据默认比值，就知道0.25时刻对应的0.5s对应的变化距离应该是 100
* t=0表示开始状态， t=1表示终止状态
* 在缓动函数中，可以自定义计算逻辑，使得根据传入的t，计算并返回一个t' [0,1]
  * 表示在t时刻，变化到t’时刻的状态
  * t=0.5 , t'=t=0.5 ， 在0.5时刻，数值变换到0.5时刻对应的200
  * t=0.5 , t'=t*t=0.25 在0.5时刻，数值变换到0.25时刻对应的 100

**自定义缓动函数**

```javascript
g.append('circle')
    .attr('cx',50)
    .attr('cy',150)
    .attr('r',50)
    .attr('fill','#fac')
    .on('click',(e,d)=>{
    d3.select(e.target)
        .transition()
        .duration(2000)
        .ease(myEase)
        .attr('cx',650)
})

let i = 1 ;
let b = true ;
function  myEase(t){
    i++;
    if(i%20 == 0){
        b = !b ;
        i = 1;
    }
    return b ? t*t : t*t*t ;
} 
```

## 5 插值器

在每一个是t之间数值是如何变化的， 由插值器决定。

**插值器特点**

* 用来定义属性过渡的效果，也可以定义两点之间的连线插值

* 也就是从a变换到b的过程中，每一个时刻需要变化的值，默认每一个时刻变化的值是相同的（线性，匀速）

* 例如a = 100 , b = 200   也就是100-200之间过渡
* 0.1时刻，长度应该为110，也就是在100-200之间插入一个110
* 0.2时刻，长度应该为120

* 插值器也需要变换的时刻t

**插值器种类**

`d3.interpolateNumber(0,100) 返回数字插值器`

`d3.interpolateRound(0,100) 返回正数插值器`

`d3.interpolateDate(date1,date2)  返回日期插值器`

`d3.interpolateString('0px','100px') 返回字符串插值器`

* 最终还是根据字符串中的数字进行插值，所以最后还是0-100的变化
* 数字的变化符合interpolateNumber插值器
* 插入值的格式与最终字符串的格式相同  ('0a','10px') , t=0.1是， 插入的值1px
* 如果字符串中有多组数字，每组数字都进行插值('0a10b','100x50y')  t=0.1 插入的值 10x10.5y

* 如果字符串中的数字分组不匹配，就只对匹配的分组插值，剩余的作为格式

* ('10px 100px' , '20px 200px')(0.5) = '15px150px'

* ('10px 100px' , '20px')(0.5) = '15px'
  * ('10px' , '20px 200px')(0.5) = '15px 200px'

`d3.interpolateRgb('rgb(100,0,200)' , 'rgb(200,0,100)') 返回rgb颜色插值器`

* 即使传递的是red 或#f00 最终也会转换成rgb数字
* t=0.5 插入的rgb(150,0,150)

`d3.interpolateHsl('hsl(90)' , 'hsl(120)') 返回hsl颜色插值器`

* d3提供了一些颜色转换的函数

```javascript
  const color = d3.color('red' / 'rgb(255,0,0)' / '#f00' / 'hsl(0 100% 50%)')
  color.formatRgb()
  color.formatHex()
  color.formatHsl()
  d3.rgb('red');
  d3.hsl('red');
  ```

* 数组插值， 对象插值， 变换插值

**自定义插值器**

* 自定义插值器工厂函数， 需要定义两个参数 start， end
* 工厂函数会返回一个插值器函数，插值器函数需要定义比例t
* 插值函数利用start， end ， t 计算指定时刻对应的插值并返回

```javascript
function myInterpolate(start , end){
    return function(t){
        return start + (end - start) * t
    }
}
```

**过渡中使用插值器**

* 过渡的内容一般包括 attr， style , text
* 默认情况下， 数字使用数字插值器， 字符串使用字符串插值器， 日期使用日期插值器，颜色使用颜色插值器
* transition在提供attr这些过渡函数外，还提供了attrTween , styleTween , textTween函数，指定插值器

> text默认没有插值器， 直接返回设置的最终值。
>
> 如果希望text也有一个过渡的效果，需要使用textTween方法

```javascript
 g.append('text')
     .attr('x',10)  
     .attr('y',20)  
     .text('0px')  
     .transition()
     .duration(2000)
     .attr('x',610)
//.text('610px')
// .textTween(()=>{
//   return d3.interpolateString('0px','610px');
// })
     .textTween(()=>{
         return myInterpolate(0,610);
     })

function myInterpolate(start , end){
    const interpolate = d3.interpolateRound(start,end);
    return function(t){
        return Math.round(start + (end-start)*t) + ' px'
        //return interpolate(t) + ' px';
    }
}
```

> 使用d3提供的字符串插值器interpolateString 过渡过程中会出现小数，这里使用所以自定义字符串插值器

# 十 交互

## 1 drag 拖拽工具

**创建工具**

```javascript
const drag = d3.drag() ; 
```

**应用工具**

* 将拖拽工具应用在需要实现拖拽行为的标签上 (selection)

```javascript
const circle = d3.select('circle');
circle.call(drag);
drag(circle);
```

* 可以有拖拽操作，但没有效果
* 所谓的应用拖拽工具，表示可以监控这个标签拖拽数据
  * 坐标点， 移动距离
* 最终的拖拽效果需要我们利用拖拽数据，编码实现。

**监听拖拽行为**

```javascript
drag.on('start',(e,d)=>{})
	.on('drag',(e,d)=>{})
	.on('end',(e,d)=>{})
```

* start 鼠标按下 监控拖拽开始，监控目标是标签
* drag 鼠标移动 监控拖拽过程，监控目标是window

* end 鼠标抬起 监控拖拽结束，监控目标是window
* e  事件对象
  * 这个e是d3封装后的事件对象
  * 包含 x , y  当前鼠标所在的位置坐标
  * 包含 dx ， dy 基于上一次鼠标移动距离
  * 包含 sourceEvent 原生事件对象 ， 包含target 目标标签
* d 触发当前拖拽行为的标签绑定的数据。

> selection包含多个标签时，每次只会对其中的一个标签进行拖拽行为，所以需要对那一个标签属性做修改
>
> 一般都是通过e.sourceEvent.target获得触发事件的标签
>
> 但由于drag监控的是整个window，所以一旦鼠标脱离标签， 尽管可以继续监控拖拽，但无法确定目标
>
> 所以需要额外的一些处理从而确保始终可以操作拖拽的目标。

```javascript
const data = [100,200,300,400,500] ;

const circles = svg.selectAll('circle')
    .data(data)
    .join('circle')
    .attr('cx',d=>d)
    .attr('cy',100)
    .attr('r',40)
    .attr('fill',(d,i)=>d3.schemeSet2[i])

let target ;
const drag = d3.drag()
.on('start',(e,d)=>{
    target = e.sourceEvent.target ;
})
.on('drag',(e,d)=>{
    //d3.select(e.sourceEvent.target)
    d3.select(target)
        .attr('cx',e.x)
        .attr('cy',e.y)
})
.on('end',()=>{
    target = null ;
})

circles.call(drag);
```

## 2 brush 刷子工具

轻易轻松刷取(选取)一块区域，并获得区域的范围信息（左上角坐标， 右下角坐标）

刷子工具自带 拖拽区域，放缩区域，移动区域 功能

* 这些功能都不影响我们的可视化标签及效果， 只提供区域信息
* 最终需要我们通过编码 利用刷子信息实现效果变化。

**创建工具**

```javascript
const brush = d3.brush();   //横纵都可以控制
const brush = d3.brushX();	//只能横向控制
const brush = d3.brushY();	//只能纵向控制
```

**设置刷子范围**

* 可以在什么样的范围内，产生拖拽区域，并拖拽
* 可以使用刷子的范围 和  刷子的范围 。 
  * 这里设置的是使用刷子的范围(边界)

```javascript
brush.extent([ [左上角点] , [右下角点]])
```

**监听获得数据**

```javascript
brush.on('start' , (e,d)=>{})  //鼠标按下
	 .on('brush' , (e,d)=>{})  //鼠标移动
	 .on('end' , (e,d)=>{})	   //鼠标抬起
```

* e 是d3包装的事件对象
  * 包含sourceEvent
  * 包含selection二维数组， 包含 左上角坐标， 右下角坐标 。 刷子范围

**应用刷子**

* 必须应用在g标签上

```javascript
g.call(brush)
brush(g);
```

**编码控制刷子区域**

```javascript
bursh.move(g,[ [] ,[] ])
g.call(brush,[[],[]])
```

> 随机产生某一范围内的数字

```javascript
const data = Array.from({length:300} , d3.randomUniform(0,15))
```

* 产生300个 0-15之间的随机数(含小数)，并存入数组

## 3 zoom 缩放工具

提供了鼠标的滚轮放缩和拖拽操作

* 在缩放的过程中， 我们只能监听获得缩放信息，不能直接看到缩放的效果
* 需要我们根据缩放信息，自己处理缩放效果。

> 放缩的同时伴随着位置的平移

**创建工具**

```javascript
const zoom = d3.zoom()
```

**监控获得信息**

```javascript
zoom.on('start',(e,d)=>{})
	.on('zoom',(e,d)=>{})
	.on('end',(e,d)=>{})
```

* 拖拽
  * start 鼠标按下， zoom 鼠标拖拽， end 鼠标抬起
* 滚轮
  * 每一次滚动都伴随着一组 start + zoom + end
* 隐藏操作(双击)
  * 放大

* e d3包装的事件对象
  * 包含 sourceEvent ， 包含了target
  * 包含缩放信息 transform (k , x , y)
    * k 缩放比例 （滚轮向上放大， 滚轮向下缩小）
    * x，y 平移的位置

> 放缩会影响平移， 拖拽也会影响平移
>
> 拖拽不会影响缩放

**应用工具**

* 一般建议在svg上应用工具。

```javascript
svg.call(zoom)
zoom(svg)
```

**缩放限制**

默认可以无限缩放

* scale [0 , infinity]
* translate [ [-infinity ,-infinity] , [infinity , infinity] ]

```javascript
zoom.scaleExtent([0.5 , 2])
```

```javascript
zoom.translateExtent( [ [0-100,0-100] , [200+100,200+100] ] )
zoom.extent([ [0,0] , [200,200] ])
```

* 放缩会导致平移， 但不放缩也可以平移（拖拽）
* 平移的范围由2个边界决定
  * translateExtent  设置平移的外边界
  * extent 设置允许平移的参考边界，默认边界[ [0,0] [width,height] ]

```javascript
//平移范围：从0,0移动到-100，-100  向左最多平移100，向上最多平移100
zoom.extent([ [0,0] , [200,200]])
zoom.translateExtent([ [-100,-100] , [300,300] ])

//平移范围：从100,100移动到-100，-100  向左最多平移200，向上最多平移200
zoom.extent([ [100,100] , [200,200]])
zoom.translateExtent([ [-100,-100] , [300,300] ])
```

**缩放计算**

* k ,  x  ,  y

```javascript
nWidth  = width * transform.k
nHeight , nR

nx = x * transform.k + transform.x = transform.applyX(x)
ny = y * transform.k + transform.y = transform.applyY(y)
  
transform.invertX(nx) ;//计算放缩平移前的x位置
transform.invertY(ny) ;//计算放缩平移前的y位置

//按照比例缩放重新计算比例尺的domain值域 (范围不变)
//放缩过程：
//	0-50 ==> 100,700
//  有了放缩信息
//	x.invert(transform.invertX(100)) , x.invert(transform.invertX(700))
//	[10,20]值域   ticks  10 11 12 13 14 15 16 17 18 19 20
//  放大2倍。 原来范围可以展示n个数字， 现在范围可以展示n/2 , 但不是10-15，因为两侧都要变大
//	最终应该是 12.5 ，13 ， 13.5 14 14.5 15 15.5 16 16.5 17 17.5
transform.rescaleX(scale);
```

**编码控制放缩平移**

```javascript
//指定元素平移指定的距离 x 移动k*dx ， y 移动k*dy (相对平移，相对原来的位置)
zoom.translateBy(svg , dx , dy) ;
//指定元素平移至距指定的原点k*dx 和 k*dy距离 (绝对平移)
zoom.translateTo(svg , dx , dy , [cx , cy])

//案例1：zoom.scaleBy(svg,0.5,[400,300]) x平移 = 400-0 * 0.5 = 200
//案例2：zoom.scaleBy(svg,0.5,[0,0]) x平移 = 0-0 * 0.5 = 0
//案例3：zoom.scaleBy(svg,0.5,[100,100]) x平移 = 100-0 * 0.5 = 50
//当连续多次使用scaleBy的时候，后面的比例计算要基于之前的比例计算
//案例4：zoom.scaleBy(svg,0.5,[400,300])   k = 0.5
//		zoom.scaleBy(svg,0.5,[400,300])	  k = 0.5*0.5 = 0.25
//		zoom.scaleBy(svg,0.5,[400,300])	  k = 0.25*0.5 = 0.125
zoom.scaleBy(svg , k , [cx,cy])

//连续多次使用scaleTo，每次都是指定的比例k
zoom.scaleTo(svg , k , [cx,cy])

//一次性完成平移和放缩
//默认参考左上角点进行缩放和平移
//每次调用scale或translate方法会返回一个带有新值tranform对象， 
const transform = d3.zoomIdentity 
	.translate(100,100)
	.sacle(0.5)
zoom.transform(svg , transform)
```

# 十一 层级数据处理

属于数据处理器， 而不是路径生成器

将原始数据处理层可以绘制层级效果的层级数据

这里注意，不是随便的数据都可以处理成层级数据，需要有一定的规格

## 1 初始格式

```text
const data = {
	name:'a',
	children:[
		{
			name:'b',
			children:[
				{name:'b1'},
				{name:'b2'}
			]
		},
		{
			name:'c',
			children:[
				{name:'c1'},
				{name:'c2'}
			]
		},
		.....
	]
}
```

```text
const data = [
	{name:'a',parent:''},
	{name:'b',parent:'a'},
	{name:'c',parent:'a'},
	{name:'b1',parent:'b'},
	{name:'b2',parent:'b'},
	{name:'c1',parent:'c'},
	{name:'c2',parent:'c'},
	...
]
```

## 2 初级层级处理

层级数据的可视化需要两次处理

1. 将原始数据处理层d3支持的层级结构，只有结构，没有可视化绘制的信息(坐标，半径，长度)

2. 在之前的层级结构基础上，根据准备绘制的层级可视化效果，处理增加对应的可视化绘制信息

初级层级处理提供两种方式，分别对应上述两种初始格式

**Hierarchy**

* 从父级找子级

```javascript
const rootNode = d3.hierarchy(data)
```

* 将层级数据处理成树形结构， 最终返回的是树结构的根节点

* 有了根节点就可以获得所有的子节点。

> 在层级结构处理时，默认会根据children属性作为子级参考
>
> 如果子级参考属性不是children，可以在数据处理时，指定子级参考

```javascript
const data = {
	name:'a',
	cs:[..]
}
const rootNode = d3.hierarchy(data,d=>d.cs) //每条记录中的cs属性表示子级信息
```

**Stratify**

* 从子级找父级
* 需要指定子级和父级参考，会按照参考来进行层级处理

```javascript
const s = d.stratify()
	.id(d=>d.name)			//指定子级信息的参考
	.parentId(d=>d.parent)  //指定父级信息的参考
const root = s(data)
```

## 3 层级数据结构

处理后，原始数据的中每一条记录(包括子级记录)都会变成一个节点。

有一个根节点

每一个节点包含以下属性：

* data 当前节点对应的原始记录(可以包括子级记录)
* children   包含子节点的数组
* parent 父节点
* depth 深入  ，根节点0 ， 每一层+1
* height 节点高度，当前节点到子节点最大距离
* value  默认不存在， 后面对节点做计算时会增加该属性， 记录计算结果。

层级结构提供的一些api

```javascript
const array = node.ancestors() //包含当前节点及其父级节点 
const array = node.descendants() //包含当前节点及其所有后代节点(包括子节点的子节点)
const array = node.leaves() ;//包含所有的叶子节点
const node = node.count() ; //计算叶子节点的数量，为当前节点增加一个value属性存储这个数量，
							//返回当前节点
const node = node.sum(fn(d)); //返回当前节点，增加value存储计算结果，
							  //根据函数， 对每条数据进行一个求和
							  // 这里面的d是每条记录，不是每一个节点
							  // 根据条件求和后，每一个父节点的value就是所有子节点求和的结果
							  //求和，未来可以根据和做排序，可以根据排序结构绘制可视化图形
const node = node.sort( fn(node1,node2) );//返回当前节点，对子节点进行大小比较并排序
										  //传递的函数来指定每两个节点之间的比较规则。
										  //函数返回 <0 0 >0 表示node1<nod2,node1==node2,..
const array = node.links();//返回一个数组， 包含一组对象， 每一个对象包含两个具有相邻关系的节点
```

```javascript
//叶子节点+2， 非叶子节点+0
//每一个节点的value记录的就是其叶子节点个数
/*
		  a
	   (4+4+0)
		/   \
	   b     c
	(2+2+0) (2+2+0)
	  / \   / \
     b1 b2 c1  c2
     2  2  2   2
*/
root.sum(function(d){
     return d.cs ? 0 : 2
})
```

## 4 二次层级处理

就是在原有的可视化层级结构的基础上，增加可视化绘制信息。

### 4.1 文件读取数据

使用`d3.json(xxx.json)`读取文件数据

* 需要以服务器方式打开

* 读取需要一定的时间，所以使用的是异步的方式，返回的是一个promise对象

* 如何获得读取的数据呢？

* 利用promise.then(data=>{})

* 利用async 和 await 直接获得返回值

```javascript
    let data ;
    (async function(){
        data = await d3.json('data/china_province_city.json')   
    })();
    ```

### 4.2 link图形生成器

实现两个点之间的连线

数据结构需要包含 source 和  target 。

source和target中需要包含起始和结尾的坐标， 可以是对象，也可以是数组。

`{source:{x:1,y:1},target:{x:2,y:2}}`

`{a:[1,1],b:[2,2]}`

提供了 srouce(d=>d.a)和target(d=>d.b) 来指定对应的source属性和target属性

提供了x(s=>s.x) 和 y(t=>t[1]) 来指定source和target中对应的x，y坐标

最终返回的就是一个路径

```javascript
const data = [
    {
        s:[100,100],
        t:[500,60]
    },{
        s:[100,120],
        t:[450,180]
    }
]

const link = d3.link(d3.curveBumpX)
	.source(d=>d.s)		//这里的d是每条记录 {s:[],t:[]}
	.target(d=>d.t)
    .x(d=>d[0])			//这里的d是 s或t ， [x,y]
    .y(d=>d[1])

svg.selectAll('path')
    .data(data)
    .join('path')
    .attr('d',link)
    .attr('stroke','#666')  
    .attr('fill','none')
```

### 4.3 tree 树结构处理

按照树级分层结构，计算每一层节点的坐标位置

```javascript
const tree = d3.tree()
	.size([width , height])  //指定坐标计算的参考空间，自动控制节点间距
	.nodeSize([width,height]) //指定每一个节点坐标范围， 手动控制节点间距
tree(root);  //为每一个节点增加增加x和y属性。
```

> 计算时默认是按照从上到下的顺序计算每一层节点的位置
>
> 如果希望从左往右展示，在可视化绘制时，x对应d.y , y对应d.x

### 5 cluster 集群数据处理

所有的叶子节点，无论是第几层，都在相同的区域展示

```javascript
const cluster = d3.cluster()
.size([width-150,height-150])
//.nodeSize([30,200])

cluster(root) 
```

### 6 partition分区处理

相当于链接树图的空间填充变体

链接树图中每一个节点对应的坐标点

分区图中每一个节点对应一个区域，这个区域由左上角点和右下角点确定。

所以在二级处理后，会为每一个节点增加(x0,y0) , (x1 , y1) 属性 ， 根据属性绘制矩形。

注意：必须提供每一个区域的和数以及排序顺序

```javascript
const p = d3.partition()
	.size([width,height])
	.round(boolean) // 控制整数计算， 不建议使用
	.padding(2) //设置每一个区域之间留白

root.sum().sort()

p(root);
```

### 7 pack 包处理

特点就是父级数据可以绘制大圈， 子级数据可以绘制小圈，大圈套小圈

也需要先求和

处理后会为每一个节点增加 x , y , r 属性

```javascript
const pack = d3.pack()
	.size([width,height])

pack(root);
```

### 8 treeMap 处理

特点：每一个节点都是一个矩形区域， 子节点区域在父节点区域内， 最终会覆盖掉父级节点

我们一般只绘制叶子节点。

处理后，为每一个节点增加(x0,y0) , (x1,y1) 属性。

```javascript
const map = d3.treemap()
	.size([width,height])
	.tile(d3.treemapBinary)
	.padding(2)

root.sum()

map(root)
```

### 9 日晕图效果

本质就是partition分区效果

原来都是矩形区域， 日晕图是弧形区域。

size从原来的矩形区域[width,height], 变为现在的圆形区域[弧度/角度 , 半径]

此时x/x0/x1 表示弧度 ， x0 起始弧度， x1终点弧度 ， y0 短半径， y1 长半径

> 效果中我们会利用rotate旋转来确定文字的书写方向
>
> d3在计算图形弧度角度时，参考的是y轴负方向(12点方向)
>
> rotate旋转角度时，参考的是x轴正方向(3点种方向)
>
> 所以需要注意根据d3计算的角度，旋转时需要额外处理90°偏差。

# 十二 地图数据处理

## 1 geojson地理信息数据结构

本质就是json ， 在json的基础上做了扩展， 包含了一些特有的属性，用来存储交互地理信息

**基本结构**

```json
{
    type , 
    coordinates,
    geometries,
    geometry,
    features,
    properties,
    crs
}
```

**type地理信息类型**

* Point ， MultiPoint			          点， 多点
* LineString ， MultiLineString    线 ， 多线
* Polygon ， MultiPolygon            面， 多面
* GeometryCollection                     地理信息集合， 包含上述的点线面
* FeatureCollection                         地理特征集合， 包含一组下面的地理特征
* Feature                                           地理特征包含地理信息（点线面）和 特征描述（properties）

**coordinates坐标**

* 不同的地理图形，有不同的坐标

```json
{
	type:'Point',
    coordinates : [x , y]
}

{
	type:'MultiPoint',
    coordinates : [
        [x1 , y1],
        [x2 , y2],
        ...
    ]
}
```

```json
{
	type:'LineString',
    coordinates : [
        [x1 , y1],
        [x2 , y2],
        ...
    ]
}
        
{
	type:'MultiLineString',
    coordinates : [
        [
            [x1 , y1],
            [x2 , y2],
        ],
        [
            [x1 , y1],
            [x2 , y2],
        ],
    	....
    ]
}
```

```json
{
	type:'Polygon',
    coordinates : [
        [ //表示面
            [x1 , y1],
            [x2 , y2],
        ],
        [ //在面中，扣掉的部分
            [x1 , y1],
            [x2 , y2],
        ],
    	....
    ]
}

{
	type:'MultiPolygon',
    coordinates : [
        [
            [ //表示面1
                [x1 , y1],
                [x2 , y2],
            ],
            [ //在面中，扣掉的部分
                [x1 , y1],
                [x2 , y2],
            ],
            ....
        ],
         [
            [ //表示面2
                [x1 , y1],
                [x2 , y2],
            ],
            [ //在面中，扣掉的部分
                [x1 , y1],
                [x2 , y2],
            ],
            ....
        ],
        ....
    ]
}
```

**geometries地理信息集合**

表示一个地理信息的集合， 与type="GeometryCollection"类型联用， 表示一组地理信息

```json
{
    type:'GeometryCollection',
    geometries:[{
        type:'Point',
        coordinates:[...]
    }]
}
```

**features地理特征集合**

表示地理信息特征集合， 由一个一个地理信息特征组成， 每一个特征包括（地理信息，相关特征属性）

与type = "FeatureCollection"类型联用

**geometry和properties**

**geometry**作为features的子对象,表示每一个地理信息

**properties**作为features的子对象，表示每一个地理信息的特征属性（任意）

与type="Feature"类型联用

```json
{
    type:'FeatureCollection',
    features:[{
        type:'Feature',
        geometry:{
            type:'Point',
            coordinates:[]
        },
        properties:{
            key:value
        }
    },{}]
}
```

## 2 地理信息获取

* 阿里云可视化平台（DataV），可以获得国内的省份信息

http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.29b915ddg9jkRK

* 借助可视化库提供的地图案例信息

* d3

* echarts

* 工具网站

* geojson.io 增加特征属性， 局部重绘
  
    <img src="images/46.png" alt="1692601551271" style="zoom:50%;" /> 
  
  * https://mapshaper.org/  导出不同格式 （topojson）
  
    <img src="images/47.png" alt="1692601610363" style="zoom:50%;" />

## 3 topojson结构

* 处理了geojson中的冗余数据， 节约存储空间
* D3作者制定规则
* 需要引入topojson.js处理topojson格式，将其转换成geojson

```javascript
(async ()=>{
    let data = await d3.json('data/china-topo.json') ;
    console.log(data); //topojson数据
    data = topojson.feature(data , data.objects['china-geo'])
    console.log(data); //geojson数据

})()
```

> data.objects属于topojson的固定结构，但内部的china-geo是非固定的
>
> 每次处理topojson数据时， 具体的属性需要自行观察或者参考开发文档

## 4 地图可视化

使用geoPath根据地理数据生成地图路径

```javascript
const path = d3.geoPath()
const d = path(geojson);
```

> 默认的地图效果不是很好，我们可以自定义投影机制（放缩，位移）
>
> 也可以使用d3提供的投影机制。

**path的常用方法**

```java
path.area(geojson) ; //计算地图信息的面积
path.bounds(geojson) ;//计算地图信息的边界 [ [左上角] , [右下角] ]  
path.centriod(geojson) ;//计算地图面心坐标

path.projections(projection) //提供投影机制
```

## 5 地图投影

根据地理信息，将其映射到平面坐标系中， 根据最终绘制的不同效果， 会有不同的投影方式。

* 自定义投影（不推荐）
* d3提供的投影器

**投影使用**

```javascript
//创建投影器
const prejection = d3.geoNaturalEarth1()

//应用投影器
const path = d3.geoPath(projection) ;

const path = d3.geoPath();
path.projection(project) ;
```

* 自定义投影（不推荐）
* d3提供多种投影方式

**投影API**

```javascript
projection.fitSize([width,height] , geojson)      //自动控制大小
projection.fitExtent([[左上角],[右下角]] , geojson) //根据指定的空间范围控制大小

projection(point) ;  //将经纬度点转换成坐标点
projection.invert(point) ; //将坐标点还原成经纬度点
projection.center([x,y]) ; //设置中心点
projection.translate([left , top]) ;//设置平移
projection.rotate([x,y,z]) ;//设置旋转角度
```

## 6 网格生成器

用来绘制经纬度网格，最终生成的是一个经纬度网格的geojson数据

配合path + projection实现路径生成。

**使用网格生成器**

```javascript
 const graticule = d3.geoGraticule()
 	.step([x间隔  , y间隔])  //间隔为0，不显示间隔线
 
 const geojson = graticule();  //网格地理数据

const d = path(geojson); //网格路径
```

## 7 世界地图绘制

shenyoujian2/d3

简介

发行版

贡献者

近期动态

shenyoujian2/d3 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

shenyoujian2/d3