200203.md

d3 的数据绑定

datum

给选择集 selection 的每个元素绑定数据，通过 text 的传入的函数，可以指定数据渲染

每个元素渲染同一数据

let datumEle = d3.selectAll(".datum");
let _datum = datumEle.datum("test")
    .text(function(data, i) {
        return "datum: " + data;
    });

每个元素渲染指定数据

let datumEle = d3.selectAll(".datum");
let arr = [
    { id: 1, name: "赵" },
    { id: 2, name: "刘" },
    { id: 3, name: "张" },
    { id: 4, name: "李" },
    { id: 5, name: "王" }
]
let _datum = datumEle.datum("test")
    .text(function(data, i) {
        return "datum: " + data[i].name;
    })

data(key[, key])

给选择集 selection 的每个元素绑定数据，通过 text 的传入的函数，可以指定数据渲染

使用

let pEle = d3.selectAll(".datum");
let arr = [
    { id: 1, name: "赵" },
    { id: 2, name: "刘" },
    { id: 3, name: "张" },
    { id: 4, name: "李" },
    { id: 5, name: "王" }
];
let dataEle = d3.select(".data-wrap").selectAll(".data");
let _data = dataEle.data(arr);
_data.text(val => {
        return "data: " + val.name;
    }).style("color", "blue").enter().append("p").classed("data", true)
    .text(val => {
        return "data: " + val.name;
    }).style("color", "blue");

值得注意的点

1. data 第二个参数 key 是个函数参数，可以指定数据与元素的绑定关系，但好像有bug；
2. 选择元素时，一定要选择父级在选择子集，d3.select(".data-wrap").selectAll(".data")，否则 enter() 方法执行以后，找不到父级，append() 会插入到最外层。
3. 当数据长度大于选择的元素时，则 enter 数组会包含多的数据长度，以便后续 append 新加元素用来渲染: data.enter().append("p");
4. 当元素比数据长度多时，则 exit 数组会包含多余的元素，以便后续 remove 移除掉: data.exit().remove();