## 第一段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) //刪除
```
