## 第一段d3代码
```
<script src="/static/js/d3.v5.min.js" charset="utf-8"></script>
<script type="text/javascript">
d3.select('body').append('p').text('hello world!');
</script>
```
运行后，Web审查器里面会多出一行：
```
<p>hello world!</p>
```
下面对这段代码进行说明：
```
d3 //返回D3对象的引用
.select('body') //返回DOM中与之匹配的第一个元素的引用，参数是CSS选择符
.append('p') //在body元素的末尾新建一个p元素
.text('hello world!') 插入当前选集之间
; //分号，一行代码结束
</script>
```
## 绑定数据
数据可以是多种多样的。如下
```
var dataset = [1, 1, 2, 3, 5, 8, 13, 21];
```
也可以是 CSV 格式：
year month average
2021 3 10.1
2021 4 11.2
2022 5 12.1
```
d3.csv("dataset.csv", d => {
return {
date: new Date(+d.year, (+d.month - 1)),
average: parseFloat(d.average)
};
}).then(function (d) {
//todo
});
```
上面的代码把year和month合并起来，并转换成日期（date）格式。
也可以是 JSON 格式：
```
d3.json("dataset.json", d => {
return {
date: new Date(+d.year, (+d.month - 1)),
average: parseFloat(d.average)
};
}).then(function (d) {
//todo
});
```
## 动态生成的段落
```
var dataset = [1, 1, 2, 3, 5, 8, 13, 21];
d3.select('body').selectAll('p').data(dataset).enter().append('p').text('Hello world!');
```
看看生成的代码：
```
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
```
代码解释：
```
var dataset = [1, 1, 2, 3, 5, 8, 13, 21];
d3
.select('body')
.selectAll('p') //操作之前要选择，无论是否存在
.data(dataset) //此后的方法都将执行多次
.enter() //创建足够数量的绑定数据的元素，然后返回引用
.append('p') //a取得enter()创建的占位符，并把一个p元素附加到响应的DOM中
.text('Hello world!'); //插入文本
```
试着把最后的text方法里面的文本给成下面的看看效果：
```
d3.select('body').selectAll('p').data(dataset).enter().append('p').text((d, i) => d + '|' + 'Hello world!' + '|' + i);
```
浏览器上的显示如下：
```
1|Hello world!|0
1|Hello world!|1
2|Hello world!|2
3|Hello world!|3
5|Hello world!|4
8|Hello world!|5
13|Hello world!|6
21|Hello world!|7
```
## 添加样式
在之前的操作链后面接着写：
```
var dataset = [1, 1, 2, 3, 5, 8, 13, 21];
d3.select('body').selectAll('p').data(dataset).enter().append('p').text((d, i) => d + '|' + 'Hello world!' + '|' + i).style('color', d => {
return d > 10 ? 'red' : 'grey'
});
```
最后两行会用红色显示。
style 方法用来设置选集的HTML属性，直接给元素添加CSS样式。另外还有attr方法给元素增加类，设置DOM属性的值。
```
.attr('class', 'bar')
```
另外classed方法可以快速的添加和删除元素的类。
```
.classed('bar', true) //添加
.classed('bar', false) //删除
```
