2. 选择元素和设置(获取)属性

选择元素和设置(获取)属性

在D3.js中，选择元素和绑定元素是最基本的内容，也是很重要的内容，接下来都是在选择元素和绑定元素的基础上展开

选择元素

在D3.js中，选择元素的函数有两个:

• d3.select()
• d3.selectAll()

选择方法通常返回当前选择或新选择

d3.select(selector)

选择与指定的选择器字符串匹配的第一个元素。如果没有元素匹配选择器，则返回一个空选择。如果多个元素匹配选择器，只有第一个匹配的元素(按文档顺序)将被选择。
例如：

d3.select("p");
// 返回当前选择
const p = d3.select("p");
// 选择 id 为 name 的 p 标签
const p = d3.select("p#name");

如果选择器不是字符串，则选择指定的节点;如果您已经有了对节点的引用，比如在事件侦听器或全局变量(如document.body)中。例如，要使点击的段落变为红色:

d3.selectAll("p").on("click", function(event) {
  d3.select(this).style("color", "red");
});

d3.selectAll(selector)

选择与指定的选择器字符串匹配的所有元素。元素将按照文档顺序(从上到下)被选择。如果文档中没有元素与选择器匹配，或者选择器为null或未定义，则返回空选择。例如，选择所有段落:
例如：

d3.selectAll("p");
// 返回当前选择
const p = d3.selectAll("p");
// 选择所有类名为 name 的 p 标签
const p = d3.selectAll("p.name");

这两个为顶级选择方法，会查询整个文档

接下来我们介绍如何缩小选择范围

selection.select(selector)

对于每个选定的元素，选择与指定的选择器字符串匹配的第一个子代元素。如果没有元素与当前元素的指定选择器匹配，则在返回的选择项中，当前索引处的元素将为null。(如果选择器为null，则返回的选择项中的每个元素都将为null，从而导致选择项为空。)如果当前元素有关联的数据，则该数据将传播到相应的选定元素。如果多个元素与选择器匹配，则只选择文档顺序中第一个匹配的元素。

// 选择第一个 p 标签里的第一个 b 标签
const b = d3.select("p").select("b");

等价于：

// 选择第一个 p 标签里的第一个 b 标签
const p = d3.select("p");
const b = p.select("b");

selection.selectAll(selector)

// 选择第一个 p 标签里的所有的 b 标签
const b = d3.select("p").selectAll("b");

等价于：

// 选择第一个 p 标签里的所有的 b 标签
const p = d3.select("p");
const b = p.selectAll("b");

设置(获取)属性

• selection.attr(name[, value])
• selection.style(name[, value])

1. 如果指定了值，则将具有指定名称的属性设置为所选元素上的指定值，并返回所选内容。
2. 如果值为常量，则给所有元素相同的属性值;
3. 如果该值是一个函数，则对每个选择的元素按顺序求值，并将当前数据(d)、当前索引(i)和当前组(节点)作为当前DOM元素(nodes[i])传递给它。然后使用函数的返回值设置每个元素的属性。
4. 空值将删除指定的属性。

// 选择第一个 div 标签并返回该对象
const div = d3.select('div')
div.style('width', '100px') // 设置宽度
    .style('height', '100px') // 设置高度
    .style('background-color', 'red') // 设置背景
    .attr('id', 'div1') // 设置 id 属性为 div1
// 在控制台输出该 div 的宽度
console.log(div.style('width'))
// 输出结果为： 100px

检查元素时可以看见：

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

由此可以发现 selection.attr(name[, value]) 和 selection.style(name[, value]) 的区别