3. 绑定数据

待我称王封你为后i 2022-12-13 04:39 130阅读 0赞

# 绑定数据 #

##### `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
    */

检查元素：

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

##### 举个栗子 #####

lhtml文档中是这些：

得到的结果如下：