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

雨点打透心脏的1/2处 2022-12-13 04:26 171阅读 0赞

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

在`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

检查元素时可以看见：

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