3. 绑定数据

绑定数据

selection.data([data[, key]])

举个栗子

// 待绑定的数据
const data = [100, 200, 300, 400]
d3.selectAll('div')
    .data(data)
    // 匿名函数第一个参数 d 为每个元素所绑定的对应数据 data
    // 匿名函数第一个参数 i 为每个元素的索引，从 0 开始递增
    .style('width', (d, i) => {
        console.log(d, i);
        return d + 'px'
    })
    .style('height', '100px')
    .style('background-color', 'red')
/*
控制台输出结果：
100 0
200 1
300 2
*/

检查元素：

<div style="width: 100px; height: 100px; background-color: red;"></div>
<div style="width: 200px; height: 100px; background-color: red;"></div>
<div style="width: 300px; height: 100px; background-color: red;"></div>

如果未指定键函数，则将数据中的第一个数据分配给第一个选定的元素，将第二个数据分配给第二个选定的元素。
通过计算每个数据和元素的字符串标识符，可以指定一个键函数来控制将哪个数据分配给哪个元素，从而替换默认的按索引连接。这个键函数为每个选定的元素求值，按顺序传递当前数据(d)、当前索引(i)和当前组(节点)，并将其作为当前DOM元素(nodes[i]);返回的字符串是元素的键。

举个栗子

lhtml文档中是这些：

<div id="name1"></div>
<div id="name2"></div>
<div id="name3"></div>
<div id="name4"></div>
<div id="name5"></div>
<div id="name6"></div>

const data = [
    {name: "name2", number: 4},
    {name: "name1", number: 8},
    {name: "name3", number: 15},
    {name: "name4", number: 16},
    {name: "name5", number: 23},
    {name: "name6", number: 42}
];

d3.selectAll("div")
    .data(data, function(d) { 
        // console.log('d',d)
        return d ? d.name : this.id;
    })
    .text(d => d.number);

得到的结果如下：

<div id="name1">8</div>
<div id="name2">4</div>
<div id="name3">15</div>
<div id="name4">16</div>
<div id="name5">23</div>
<div id="name6">42</div>