# d3

**Repository Path**: lijingyang91/d3

## Basic Information

- **Project Name**: d3
- **Description**: d3.js
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# d3
d3.js v5

# 入门练习

> 1、选择集
```text
在D3中，用于选择元素的函数有两个：
 * d3.select(): 选择所有指定元素的第一个
 * d3.selectAll(): 选择指定元素的全部
这个两个函数返回的结果被称为选择集
```

> 2、绑定数据
```text
D3 有一个很独特的功能：能将数据绑定到 DOM上，也就是绑定到文上。
通过两个函数来实现：
 * datum(): 绑定一个数据到选择集上
 * data(): 绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
相对而言，data()比较常用。
```

> 3、插入、删除元素
```text
# 插入元素
    * append(): 在选择集末尾插入元素
    * insert(): 在选择集前面插入预元素
    
# 删除元素
    * remove(): 删除指定选择集的元素
```

> 4、画布
```text
# SVG
    可伸缩矢量图，使用xml格式来定义图形
    特点：
        * SVG绘制的是矢量图，因此对图像进行放大不会是失真。
        * 基于XML，可以为每一个元素添加JavaScript事件处理器。
        * 每个图形均视为对象，更改对象的属性，图形也会改变。
        * 不适合游戏应用。
    
# Canvas
    通过javaScript来绘制2D图形，HTML5新增的元素
    特点：
        * 绘制的是位图，图像放大后会失真。
        * 不支持事件处理器。 
        * 能够以.png和.jpg格式保存图像
        * 适合游戏应用。
        
 ## 使用D3绘图建议使用SVG
```

> 5、比例尺/缩放（scale）
```text
应用场景：将某一区域的值映射到另一区域，其大小关系不变。
# 线性比例尺
    线性比例尺，能将一个连续的区间，映射到另一区间。
    d3.scaleLinear() 返回一个线性比例尺，它的返回值是可以当做函数来使用的。
    (v3版为：d3.scale.linear())
    domain() 和 range() 分别设定比例尺的定义域和值域。
    
# 序数比例尺
    有时候，定义域和值域不一定是连续的。
    d3.scaleOrdinal() 返回一个线性比例尺，它的返回值是可以当做函数来使用的。
    (v3版为：d3.scale.ordinal())
    domain() 和 range() 分别设定比例尺的定义域和值域。
    
## d3.min()和d3.max()这个两个函数经常配合比例尺一起使用。
```

> 6、坐标轴（axis）
```text
# d3提供了四个方向：
    * axisTop(scale): 坐标刻度向上的
    * axisRight(scale): 坐标刻度向右的
    * axisBottom(scale): 坐标刻度向下的
    * axisLeft(scale): 坐标刻度向左的
  参数 scale: 是一个比例尺的返回值，可以作为函数使用的。
```

> 7、过渡（transition）
```text
# D3 提供了 4 个方法用于实现图形的过渡：从状态 A 变为状态 B。
    * transition(): 启动过渡效果。
    * duration(): 指定过渡持续的时间，单位为毫秒。
    * ease(): 指定过渡的方式。
    * delay():指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。
              此函数可以对整体指定延迟，也可以对个别指定延迟。
              
## 注意！特殊价绍ease()--在d3.js v3 和 v4/v5中过渡方式使用的变化
        1) v3
            指定过渡的方式，常用的有：
                > linear：普通的线性变化
                > circle：慢慢地到达变换的最终状态
                > elastic：带有弹跳的到达最终状态
                > bounce：在最终状态处弹跳几次
                > 等等
                调用时，格式形如： ease(“bounce”)。
        2) v4/v5
            变成例如：d3.easeBounce等等。
            调用时，格式形如： ease(d3.easeBounce)。
```

> 8、理解update enter exit

![update enter exit解释图](./img/enterexit-2.png "update enter exit解释图")
```text
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。
** 有一个问题：当数组的长度与元素数量不一致（数组长度 > 元素数量 or 数组长度 < 元素数量）时?
# Update 和 Enter 的使用：
    当对应的元素不足时 （ 绑定数据数量 > 对应元素 ），需要添加元素（append）。
    在之前的练习当中我们经常使用到如下代码：
        ```code
            svg.selectAll("rect")   //选择svg内所有的矩形
                .data(dataset)      //绑定数组
                .enter()            //指定选择集的enter部分
                .append("rect")     //添加足够数量的矩形元素
        ```
    前面提到，这段代码使用的情况是当以下情况出现的时候：
    
        \*有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。\*
        
    ## 请大家记住：
       * update 部分的处理办法一般是：更新属性值
       * enter 部分的处理办法一般是：添加元素后，赋予属性值
       
# Update 和 Exit 的使用
    当对应的元素过多时 （ 绑定数据数量 < 对应元素 ），需要删掉多余的元素。
    示例代码：
        ```code
            svg.selectAll("rect")   //选择svg内所有的矩形
                .data(dataset)      //绑定数组
                .exit()             //指定选择集的exit部分
                .remove()           //exit部分的处理通常是删除元素
        ```
    ## 请大家记住：
        * exit 部分的处理办法一般是：删除元素（remove）
```

> 9、交互
```text
用户用于交互的工具一般有三种：鼠标、键盘、触屏。

# 重点注意！on()的第二个参数是函数，但不能使用箭头函数，不然this是指向window，而不是指向当前元素。
# 补充：on()的使用不要在transition()之后，否则报错，事件类型不认识。
    例如： Uncaught Error: unknown type: click
    
# 如何添加交互：
    示例代码：
        ```code
            let circle = svg.append("circle");
            
            circle.on("click", function(){
                //在这里添加交互内容
            });
        ```
    ## on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。
        1) 鼠标常用的事件有：
            > click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
            > mouseover：光标放在某元素上。
            > mouseout：光标从某元素上移出来时。
            > mousemove：鼠标被移动的时候。
            > mousedown：鼠标按钮被按下。
            > mouseup：鼠标按钮被松开。
            > dblclick：鼠标双击。
            
        2) 键盘常用的事件有三个：
           > keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。
           > keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
           > keyup：当用户释放键时触发，不区分字母的大小写。 
           
        3) 触屏常用的事件有三个：
           > touchstart：当触摸点被放在触摸屏上时。
           > touchmove：当触摸点在触摸屏上移动时。
           > touchend：当触摸点从触摸屏上拿开时。
           
    ### 当某个事件被监听到时，D3 会把当前的事件存到 d3.event 对象，里面保存了当前事件的各种参数，请大家好好参详。
        如果需要监听到事件后立刻输出该事件，可以添加一行代码：
            ```code
                let circle = svg.append("circle");
                
                circle.on("click", function(){
                    console.log(d3.event);
                });
            ```
```

> 10、布局（数据转换）

![D3 与其它可视化工具的区别](./img/layout-2.png "D3 与其它可视化工具的区别")
```text
布局不是要直接绘图而是获取绘图所需数据。
布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据
# D3 总共提供了 12 个布局：
    > 饼状图（Pie）
    > 力导向图（Force）
    > 弦图（Chord）
    > 树状图（Tree）
    > 集群图（Cluster）
    > 捆图（Bundle）
    > 打包图（Pack）
    > 直方图（Histogram）
    > 分区图（Partition）
    > 堆栈图（Stack）
    > 矩阵树图（Treemap）
    > 层级图（Hierarchy）
    
    12 个布局中，层级图（Hierarchy）不能直接使用。
    集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。
    如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。
    这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。
```