d3-selection (DOM操作相关API)

d3-selection (DOM操作相关API)

Selections 允许强大的数据驱动文档对象模型 (DOM): 设置 attributes, styles, properties, HTML 或 text 内容等等。使用 data join 的 enter 和 exit 选择集可以用来根据具体的数据 add 或 remove 元素。

1.selection

选择器根元素: document.documentElement

2.selectAll(selector)

• 参数为css选择器，例如标签选择器p，class选择器.container，id选择器#cd，包括其他css选择器都可以，例如p a等。
• selector 为 null 或 undefined 则返回空选择集
• selector 除字符串之外还可以是节点数组。

获取一组DOM

3.select(selector)

选择某一个DOM节点，如果有多个，则选择第一个，参数和selectAll一样。

1.

const c = d3.selectAll('p').selectAll('li');
console.log(c);

2.

const c = d3.selectAll('p').select('li');
console.log(c);

4.attr，style，property，html，text

 d3.selectAll("p")
    .attr("class", "graf")
    .style("color", "red");

2.

d3.selectAll('p')
      .attr('style', 'color: green;font-size:50px;')

有些 HTML 元素的属性比较特殊，不能直接使用 attr 和 style 操作，比如文本域的 value 属性以及 checkbox 的 checked 属性。使用peoperty可以操作这些属性。

8. d3.local(),local.set()

4. update，enter，exit，merge

data进行数据绑定过程中，会产生ente数据集和exit数据集，其中如果有多的数据没有元素可以进行绑定，那么会在enter中产生占位节点，exit就是没有对应数据的已经存在的 DOM 节点的数据集。

var data = [
      {name: "Locke", number: 4},
      {name: "Reyes", number: 8},
      {name: "Ford", number: 15},
      {name: "Jarrah", number: 16},
      {name: "Shephard", number: 31},
      {name: "Kwon", number: 34},
      {name: "wmz", number: 100},
    ];
    // 获取所有的div选择集
    const keys = d3.select('#d3-selection-div')
                    .selectAll('div');
    console.log('keys', keys);
    // 数据和选择集进行绑定，多的数据创建空节点进入enter，多的元素进入exit
    const update = keys.data(data, function(d) { return d ? d.name : this.id; })
        .text(function(d) { return d.number; });
    console.log('update', update);
    console.log('keys', keys);
    // 删除没有数据匹配绑定的元素，返回删除的元素选择集
    const ekeys = update.exit().remove();
    console.log('update', update);
    console.log('ekeys', ekeys);
    // 返回新增的节点
    const akeys = update.enter().append('div').attr('id', 'wrr');
    console.log('update', update);
    console.log('akeys', akeys);
    const mer = akeys.merge(update);
    console.log('mer', mer);

update：

enter：

exit：