何大小成

D3 · 数据绑定 · data()

数据绑定

数据绑定（Data-Join）是D3处理数据集和数据的方法。

d3.select与d3.selectAll这两个方法返回的选择集是没有数据的，它相当于操作DOM。而要使得选择集拥有数据，要采用d3.data或者d3.datum方法。

两个方法都是D3的核心，希望能弄懂，尤其是d3.data

d3.datum 与 d3.data

方法 含义
d3.datum([val]) 每个元素都绑定相同的value
d3.data(val [,key]) 每个元素绑定数组每一项val，key是健函数（指定绑定数组规则）

本文主要针对d3.data(),做出讲解。其实弄懂了data()，datum()也不难理解

d3.data()

与Data-Join打交道的有三个单词：update enter exit

方法 含义 关系 （[]-数据，DOM-元素） 处理方法
update 绑定数据的元素将被更新 已存在的元素，[] = DOM 修改attr属性
enter 部分不存在的元素将可视化 元素过少，[]>DOM 给选择集append()足够元素
exit 删除多余的元素 元素过多，[]<DOM remove() 多余元素

See the Pen d3.data by 何大小成 (@hopkinson) on CodePen.

例子中，body里的p元素也就只有一个，但是数据dataArr有4个。得出：enter部分有3个多余的数据。处理方法就是添加元素（append）,使其与多余数据对应。结果发现body元素里多了3个元素。

处理数据常用模板

此模板的作用是无论网页中的p元素是多余的还是不够的，结果都是一个p元素对应数组中的一项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1.数据
let dataArr = []

// 2.选择集
let p = d3.select('body').selectAll('p')

// 3.绑定数据后，返回update,exit,enter
let update = p.data(dataArr)
let enter = update.enter()
let exit = update.exit()

// 4.update处理
update.attr('', '')

// 5.enter处理
enter.append('')

// 6.exit处理
exit.remove()