D3.js选择元素

选择是D3.js的核心概念之一。 它基于CSS选择器。 它允许我们选择网页中的一个或多个元素。 此外，它允许我们修改，追加或删除与预定义数据集相关的元素。
## 选择方法：
- select() - 通过匹配给定的CSS选择器，仅选择一个DOM元素。 如果给定的CSS选择器有多个元素，则仅选择第一个元素。

- selectAll() - 通过匹配给定的CSS选择器来选择所有DOM元素。

```html
//仅选择一个元素
   var p=d3.select("p");
   p.datum("这是第六串字符串")
      .text(function(b) {
           return b;
      });
//选择所有元素
   var body = d3.select("body");
   var p=body.selectAll("p");
   p.data(["这是第一个测试", "这是第二个测试", "这是第三个测试"])
      .text(function(d,i) {
          return d;
      });
```

## 选择方式：

### 按标签选：
可以使用其TAG选择HTML元素。 以下语法用于选择“div”标记元素。

```html
d3.select("<标签名>")
```
示例：

```html
<html>
   <head>
      <script src="https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <div>
         Hello World!
      </div>
      <script>
         var d3.select("div").datum("hi world!").text(function(d){
		 return d;
		 });
      </script>
   </body>
</html>
```

### 按类名选:
可以使用以下语法选择使用CSS类设置样式的HTML元素。

```html
d3.select(".<class name>")
```
示例：

```html
<html>
   <head>
      <script src="https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <div class="tt">
         Hello World!
      </div>
      <script>
         var d3.select(".tt").datum("hi world!").text(function(d){
		 return d;
		 });
      </script>
   </body>
</html>
```

### 按ID选:
HTML页面中的每个元素都应具有唯一的ID。 我们可以使用元素的唯一ID来使用下面指定的select（）方法来访问它。

```html
d3.select("#<id of an element>")
```
示例：

```html
<html>
   <head>
      <script src="https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <div id="tt">
         Hello World!
      </div>
      <script>
         var d3.select("#tt").datum("hi world!").text(function(d){
		 return d;
		 });
      </script>
   </body>
</html>
```

## 示例：

```html
<html>
 <head>
   <script src="https://d3js.org/d3.v6.js"></script>

</head>

D3.js选择元素

D3.js修改元素

收支记录程序

一代明君

Comments | NOTHING