## 准备数据（CSV格式）
```
year,month,average
2020,8,22.15
2020,9,72.52
2020,10,82.53
2020,11,90.45
2020,12,92.65
2021,1,100.71
2021,2,102.21
2021,3,111.44
2021,4,121.41
2021,5,132.55
2021,6,132.55
2021,7,132.55
2021,8,132.55
2021,9,132.55
2021,10,132.55
2021,11,132.55
2021,12,132.55
```
##
加载 CSV 数据
```
//定义svg的宽和高
var w = 800;
var h = 300;
// 加载数据，并转换数据
d3.csv("/shop/visual/pathData", d => {
return {
date: new Date(+d.year, (+d.month - 1)),
average: parseFloat(d.average)
};
}).then(function (dataset) {
console.table(dataset, ['date', 'average']);
}
```
## 定义用于横坐标的时间比例尺
```
xScale = d3.scaleTime()
.domain([
d3.min(dataset, function (d) {
return d.date;
}),
d3.max(dataset, function (d) {
return d.date;
})
])
.range([0, w]);
```
上面求最大值和最小值的方法可以简写。
```
.domain(d3.extent(dataset, d=>d.date))
```
## 建立线性纵坐标
```
//纵坐标
yScale = d3.scaleLinear()
.domain(d3.extent(dataset, d => d.average))
.range([h, 0]);
```
## 定义线条生成器
```
//定义线条生成器
line = d3.line()
.defined(function (d) {
return d.average >= 0 && d.average <= 100;
}) //过滤数据，只绘制0-100间的数据
.x(function (d) {
return xScale(d.date);
})
.y(function (d) {
return yScale(d.average);
});
//定义危险区域的线条生成器
dangerLine = d3.line()
.defined(function (d) {
return d.average >= 100;
}) //过滤数据，只绘制不小于100的数据
.x(function (d) {
return xScale(d.date)
})
.y(function (d) {
return yScale(d.average)
})
```
如果想让折线变成区域，只需修改一个方法`d3.area()`即可。后面的章节后讲到。
## 提供样式表
```
<style type="text/css">
.line {
fill: none;
stroke: teal;
stroke-width: 0.5;
}
.danger {
stroke: red;
}
</style>
```
下面是完整的d3代码
```
//定义svg的宽和高
var w = 800;
var h = 500;
//留白
var padding = 40;
// 加载数据，并转换数据
d3.csv("/shop/visual/pathData", d => {
return {
date: new Date(+d.year, (+d.month - 1)),
average: parseFloat(d.average)
};
}).then(function (dataset) {
//横坐标
xScale = d3.scaleTime()
.domain(d3.extent(dataset, d => d.date))
.range([padding, w - padding]);
//纵坐标
yScale = d3.scaleLinear()
.domain(d3.extent(dataset, d => d.average))
.range([h - padding, padding]);
//定义线条生成器
line = d3.line()
.defined(function (d) {
return d.average >= 0 && d.average <= 100;
}) //过滤数据，只绘制0-100间的数据
.x(function (d) {
return xScale(d.date);
})
.y(function (d) {
return yScale(d.average);
});
//定义危险区域的线条生成器
dangerLine = d3.line()
.defined(function (d) {
return d.average >= 100;
}) //过滤数据，只绘制不小于100的数据
.x(function (d) {
return xScale(d.date)
})
.y(function (d) {
return yScale(d.average)
})
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
svg.append("path")
.datum(dataset)
.attr("class", "line danger")
.attr('d', dangerLine);
});
```
下面给出浏览器的效果图。
