1. 第一步,‘安装’D3
D3 是一个 JavaScript 函数库,并不需要npm那种安装,它只有一个文件,在 HTML 中引用即可。在d3官网可以下载所需文件。或者直接引入cdn链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script >
console.log(d3)
</script>
</body>
</html>
引入成功,如图
2. 开始使用
<script >
console.log(d3)
var svg = d3.select('#app') //选中画布容器,在里面添加内容
.append('svg')
.attr('width', 500) //定义画布的宽度
.attr('height',500) //定义画布的高度
.append('g') //加入到一个相同的类
var data = [12,8 ,32,45,15,22,38,22,49] //定义一组数据,即图表的数值
//定义x轴映射关系
var xScale = d3.scaleLinear()
.domain([0,data.length - 1])
.range([0,500])
//定义y轴映射关系
var yScale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([height,0])
//定义面积生成函数
var areaGenerate = d3.area()
.x((d,i)=> xScale(i))
.y0(height)
.y1((d)=> yScale(d))
//画线
svg.append('g')
.attr('d',areaGenerate(data))
.style('fill','#00b388')
</script>