> For the complete documentation index, see [llms.txt](https://miya-d3.gitbook.io/turior/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://miya-d3.gitbook.io/turior/chpater3-ke-shi-hua-shu-ju.md).
# chpater-3 可视化数据
eg1:
```javascript
var data = [10,40,60];
var canvas = d3.select('body')
.append('svg')
.attr('width',500)
.attr('height',500);
canvas.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width',function(item){return item*10})
.attr('height',50)
.attr('y',function(item,i){
return i*60
})
.attr('fill','skyblue')
```
eg2:
```javascript
var data = [10,40,60];
var canvas = d3.select('body')
.append('svg')
.attr('width',500)
.attr('height',500);
canvas.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width',40)
.attr('height',function(item){
return item*10
})
.attr('x',function(item,i){
return i*60
})
.attr('y',function(item){
return 500-item*10
})
.attr('fill','skyblue')
```
## methods:
### 1.selectAll()
选择所有的节点, 没有的话返回一个空的数组节点群( empty array or empty selection), 可将这些空的数组绑定数据, 用 data()方法
### 2.data()
绑定数据到空节点 (empty selection)
这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。
从表面上，并不能看出什么变化。但在内部，它是在对应的DOM元素上添加了一个\_\_data\_\_属性，可以通过document.getElementsByTagName("p")\[0].\_\_data\_\_看到。
### 3.enter()
{% hint style="info" %}
简言之,占位符，虚拟dom
{% endhint %}
当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。下面的例子，我们没有事先提供DOM元素：
```
```
仍旧执行：
```
d3.select("body").selectAll("p").data([1, 2, 3])
```
enter()是用来在绑定数据之后，选择缺少的那部分DOM元素。我们可能会疑惑，既然是缺少的部分，怎么选择呢？这里就需要我们发挥一点想象力，想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。
enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。
由此以来，我们使用 d3.select("body").selectAll("p").data(\[1, 2, 3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。
### 4.exit()
与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。
在下面例子中，我们多提供了一个DOM元素：
```
```
这回就容易理解了，因为是多出来的，那么就是实际存在的，即最后一个\。
多出来的话，我们可以接着用.remove()移除这些元素，代码如下：
```
d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://miya-d3.gitbook.io/turior/chpater3-ke-shi-hua-shu-ju.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.