<commit_before>## 一 选择元素
- d3的选择元素的函数有`select`和`selectAll`两个，前者返回匹配的第一个元素，后者返回匹配的所有元素
- 这两个函数的参数均为css选择器
- 还可以直接是`DOM API`选择的元素，如果是多个元素不能用select函数选中第一个匹配的元素，应该将其作为`selectAll`的参数
- 还可以进行链式选择

## 二 选择集
> d3.select和d3.selectAll返回的对象称为选择集(*selection*)

### 2.1 查看选择集状态
1. `selection.empty()`，判断选择集是否为空
2. `selection.node()`,返回第一个非空元素，若选择集为空返回null
3. `selection.size()`,返回选择集中的元素个数

### 2.2 设定和获取属性

1. `selection.attr(name[,value])`,省略value返回当前的属性值，不省略则将name的值设置为value
2. `selection.classed(name[,value])`,value的值为true或者false表示是否开启该css,如果省略则返回一个布尔值，表示类是否开启。还可以是一个对象，`selection.classed({"red":true,"bigsize":true})`,或者`selection.classed("red bigsize",true)`
3. `selection.style(name[,value[,priority]])`,也可以使用对象形式将几个样式写在一起`selection.style({"color":"red","font-size":"30px"})`
4. `selection.property(name[,value])`，类似文本框的value不能通过attr获取，需要使用property
5. `selection.text([value])`，同jquery
6. `selection.html([value])`，同jquery

### 2.3 添加、插入和删除
1. `selection.append(name)`,指定元素之后插入一个元素，name为元素名称
2. `selection.insert(name[,before])`,指定元素之前插入一个元素，name是被插入的元素名称，before是css选择器名称。
3. `selection.remove()` 删除选择集中的元素。

### 2.4 数据绑定
1. `selection.datum([value])`,选择集中的每一个元素都绑定相同的数据value
2. `selection.data([values[,key]])`,选择集中的分一个元素分别绑定数组values的每一项，key是一个键函数，用于指定绑定数组时的对应规则。

#### 2.4.1 datum()的工作过程
>对选择集中的每一个元素都为其增加一个`__data__`属性。

```
var p = d3.select('body')
          .selectAll('p');
p.datum('hello')
 .text(function(d,i){
    return d+' '+i;
 })
```

**定义一个匿名函数function(d,i)，在函数体中使用d(数据datum)和i(索引index)**
**在被绑定数据的选择集中添加元素后，新元素会继承该数据**

#### 2.4.2 data()的工作过程
>data()能将数组各项分别绑定到选择集的各元素上，并且能指定绑定的规则，当数组长度与元素数量不一致的时候，data()也能处理，当数组长度大于元素长度的时候，为多余数据预留元素位置，当小于元素数量时，能获取多余的元素的位置，以便将来删除。

根据数组长度和元素数量的关系，有如下三种情况：
- update:数组长度 = 元素数量，绑定的数据的元素“即将被更新”
- enter: 数组长度 > 元素数量，部分还不存在的元素“即将进入可视化”，多的数据
- exit: 数组长度 < 元素数量，多余的元素“即将退出可视化”，多的元素

`p.data(dataset).enter()` `p.data(dataset).exit()`

#### 2.4.3 绑定的顺序
默认按照索引号顺序绑定，也可以不按照顺序，需要用到第二个参数，称之为**键函数**
**只有在选择集原来已经绑定有数据的情况下，使用键函数才有效果。**

### 2.5 选择集的处理

#### 2.5.1 enter的处理方法
如果没有足够元素，处理方法就是添加元素。
`enter.append('p').text(function(d){return d;})`

通常，从服务器读取数据之后，网页是没有与之对应的元素的，因此，**选择一个空集，然后使用enter().append()的形式来添加足够数量的元素**，如body内无p元素
```
var dataset=[10,20,30,40,50];
var body=d3.select('body');
body.selectAll('p')
    .data(dataset)
    .enter()
    .append('p')
    .text(function(d,i){
    return d;
    });
```
#### 2.5.2 exit的处理方法
exit()主要处理方法是移除，选择之后，调用remove()方法进行移除。

#### 2.5.3 处理模板
大多数情况下都是update部分更新元素属性，enter部分添加元素并赋予初始属性，exit部分都是删除元素，可以归纳为一个模板，不必理会数组长度和元素数量之间的关系。
```
var dataset=[10,20,30]
var p=d3.select('body').selectAll('p');
//绑定数据后分别返回update enter exit
var update=p.data(dataset);
var enter=update.enter();
var exit=update.exit();
//1. update的处理方法
update.text(function(d,i){return d;});
//2. enter部分的处理方法
enter.append('p')
     .text(function(d,i){return d;});
//3.exit部分的处理方法
exit.remove();
```

#### 2.5.4 过滤器
    selection.filter(function(d,i){
        if(d>20){
            return true;
        }
        else
            return false;
        })

返回大于20的数据，返回true代表选择。

#### 2.5.5 选择集的顺序
类似于[].sort,参数是一个比较函数。

#### 2.5.6 each()的应用
each()允许对选择集的各元素分别进行处理。

#### 2.5.7 call()的应用
call()允许将选择集自身作为参数，传递给某一函数。如

    d3.selectAll('div').call(fun);

等同于：

    function fun(selection){
        selection.attr('name','value');
    }
    fun(d3.selectAll('div'));<commit_msg>edit selection and data.md<commit_after>## 一 选择元素
- d3的选择元素的函数有`select`和`selectAll`两个，前者返回匹配的第一个元素，后者返回匹配的所有元素
- 这两个函数的参数均为css选择器
- 还可以直接是`DOM API`选择的元素，如果是多个元素不能用select函数选中第一个匹配的元素，应该将其作为`selectAll`的参数
- 还可以进行链式选择

## 二 选择集
> d3.select和d3.selectAll返回的对象称为选择集(*selection*)

### 2.1 查看选择集状态
1. `selection.empty()`，判断选择集是否为空
2. `selection.node()`,返回第一个非空元素，若选择集为空返回null
3. `selection.size()`,返回选择集中的元素个数

### 2.2 设定和获取属性

1. `selection.attr(name[,value])`,省略value返回当前的属性值，不省略则将name的值设置为value
2. `selection.classed(name[,value])`,value的值为true或者false表示是否开启该css,如果省略则返回一个布尔值，表示类是否开启。还可以是一个对象，`selection.classed({"red":true,"bigsize":true})`,或者`selection.classed("red bigsize",true)`
3. `selection.style(name[,value[,priority]])`,也可以使用对象形式将几个样式写在一起`selection.style({"color":"red","font-size":"30px"})`
4. `selection.property(name[,value])`，类似文本框的value不能通过attr获取，需要使用property
5. `selection.text([value])`，同jquery
6. `selection.html([value])`，同jquery

### 2.3 添加、插入和删除
1. `selection.append(name)`,指定元素之后插入一个元素，name为元素名称
2. `selection.insert(name[,before])`,指定元素之前插入一个元素，name是被插入的元素名称，before是css选择器名称。
3. `selection.remove()` 删除选择集中的元素。

### 2.4 数据绑定
1. `selection.datum([value])`,选择集中的每一个元素都绑定相同的数据value
2. `selection.data([values[,key]])`,选择集中的分一个元素分别绑定数组values的每一项，key是一个键函数，用于指定绑定数组时的对应规则。

#### 2.4.1 datum()的工作过程
>对选择集中的每一个元素都为其增加一个`__data__`属性。

```
var p = d3.select('body')
          .selectAll('p');
p.datum('hello')
 .text(function(d,i){
    return d+' '+i;
 })
```

**定义一个匿名函数function(d,i)，在函数体中使用d(数据datum)和i(索引index)**
**在被绑定数据的选择集中添加元素后，新元素会继承该数据**

#### 2.4.2 data()的工作过程
>data()能将数组各项分别绑定到选择集的各元素上，并且能指定绑定的规则，当数组长度与元素数量不一致的时候，data()也能处理，当数组长度大于元素长度的时候，为多余数据预留元素位置，当小于元素数量时，能获取多余的元素的位置，以便将来删除。

根据数组长度和元素数量的关系，有如下三种情况：
- update:数组长度 = 元素数量，绑定的数据的元素“即将被更新”
- enter: 数组长度 > 元素数量，部分还不存在的元素“即将进入可视化”，多的数据
- exit: 数组长度 < 元素数量，多余的元素“即将退出可视化”，多的元素

`p.data(dataset).enter()` `p.data(dataset).exit()`

#### 2.4.3 绑定的顺序
默认按照索引号顺序绑定，也可以不按照顺序，需要用到第二个参数，称之为**键函数**
**只有在选择集原来已经绑定有数据的情况下，使用键函数才有效果。**

### 2.5 选择集的处理

#### 2.5.1 enter的处理方法
如果没有足够元素，处理方法就是添加元素。
`enter.append('p').text(function(d){return d;})`

通常，从服务器读取数据之后，网页是没有与之对应的元素的，因此，**选择一个空集，然后使用enter().append()的形式来添加足够数量的元素**，如body内无p元素
```
var dataset=[10,20,30,40,50];
var body=d3.select('body');
body.selectAll('p')
    .data(dataset)
    .enter()
    .append('p')
    .text(function(d,i){
    return d;
    });
```
#### 2.5.2 exit的处理方法
exit()主要处理方法是移除，选择之后，调用remove()方法进行移除。

#### 2.5.3 处理模板
大多数情况下都是update部分更新元素属性，enter部分添加元素并赋予初始属性，exit部分都是删除元素，可以归纳为一个模板，不必理会数组长度和元素数量之间的关系。
```
var dataset=[10,20,30]
var p=d3.select('body').selectAll('p');
//绑定数据后分别返回update enter exit
var update=p.data(dataset);
var enter=update.enter();
var exit=update.exit();
//1. update的处理方法
update.text(function(d,i){return d;});
//2. enter部分的处理方法
enter.append('p')
     .text(function(d,i){return d;});
//3.exit部分的处理方法
exit.remove();
```

#### 2.5.4 过滤器
    selection.filter(function(d,i){
        if(d>20){
            return true;
        }
        else
            return false;
        })

返回大于20的数据，返回true代表选择。

#### 2.5.5 选择集的顺序
类似于[].sort,参数是一个比较函数。

#### 2.5.6 each()的应用
each()允许对选择集的各元素分别进行处理。

#### 2.5.7 call()的应用
call()允许将选择集自身作为参数，传递给某一函数。如

    d3.selectAll('div').call(fun);

等同于：

    function fun(selection){
        selection.attr('name','value');
    }
    fun(d3.selectAll('div'));

### 3.6 数组的处理

#### 3.6.1 排序
- 递增函数 d3.ascending(a,b)
- 递减函数 d3.descending(a,b) `numbers.sort(d3.descending`

#### 3.6.2 求值
- d3.min(array[,accessor])
- d3.max(array[,accessor])
- d3.extend(array[,accessor]),返回数组最大值和最小值
- d3.sum(array[,accessor]),返回数组的总和，为空返回0
- d3.mean(array[,accessor]),返回平均值，数组为空返回undefined
- d3.median(array[,accessor]),求数组的中间值，为空返回undefined
- d3.quantile(numbers,p)，求取p分位点的值，p的范围为[0,1]。数组需先递增排序。
- d3.variance(array[,accessor]),求方差
- d3.deviation(array[,accessor]),求标准差
- d3.bisectLeft() 返回某数组左边的位置`d3.bisectLeft(numbers.sort(d3.ascending),16)` 16为数组的某元素值
- d3.bisect() 返回某数组项右边的位置
- d3.bisectRight() 返回某数组右边的位置

#### 3.6.3 操作数组
- d3.shuffle(array[,lo[,hi]]),随机排列数组
- d3.merge(arrays)，合并两个数组
- d3.pairs(array),返回邻接的数组对，原数组不变
- d3.range([start,]stop[,step])，返回等差数列，返回的等差数列为[start,start+step,start+2*step,...]
- d3.permute(array,indexes):根据指定的索引号数组返回排列后的数组，原数组不变。
- d3.zip(arrays...)：用多个数组来制作数组的数组，可以用来求向量的内积
- d3.transpose(matrix)：求转置矩阵，行换成列。

#### 3.6.4 映射（Map）
- d3.map([object][,key])，构造映射，第一个参数是源数组，第二个参数用于指定映射的key
- map.has(key),如果指定的key存在，则返回true,反之，则返回false
- map.get(key),如果指定的key存在，则返回该key的value,否则，返回undefined
- map.set(key,value)，设置key和value,存在则覆盖，不存在则添加。
- map.remove(key) 指定key存在则删除对象并返回true,不存在则返回false
- map.keys()
- map.values()
- map.entries()
- map.forEach()
- map.empty()
- map.size()

#### 3.6.5 集合(Set)
无顺序，不重复。
- d3.set([array])
- set.has(value)
- set.add(value)
- set.remove(value)
- set.values()
- set.forEach(function)
- set.empty()
- set.size()

#### 3.6.6 嵌套结构（Nest）
- d3.nest()
- nest.key(function)
- nest.entries(array):构建嵌套结构
- nest.sortKeys(comparator),按照键对嵌套结构进行排序，接在nest.key()后使用。
- nest.sortValues(comparator),按照值对嵌套结构进行排序
- nest.rollup(function),对每一组叶子节点调用指定的函数，该函数含有一个参数values,是当前叶子节点的数组。
- nest.map(array[,mapType])：以映射的形式输出数组。
{'fraction_non_alphanumeric': 0.1991715976331361, 'fraction_numerical': 0.02710059171597633, 'mean_word_length': 6.241645244215938, 'pattern_counts': {'":': 8, '<': 5, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3722986', 'n_tokens_mistral': 5062, 'n_tokens_neox': 5448, 'n_words': 382}