前言：d3.js的学习正式开启，对它的了解很少。不管怎样，还是坚持学下来吧！这篇博客主要是D3.jd的一个介绍和创建。会用到有关网页开发的内容。
一、d3.js的简单介绍
d3.js是一个数据可视化的库，技术基础是SVG。（本质上还是js的一个使用）。
二、导入d3.js
1、直接通过互联网链接导入
<script src="http://d3js.org/d3.v5.min.js"></script>
2、通过本地服务器链接（推荐）
本地路径这里只是个示例，具体路径害得根据跟个人来写
<script src="/static/js/d3.min.js"></script>
3、通过unpkg链接
<script src="https://unpkg.com/browse/[email protected]/dist/d3.js"></script>
三、SVG—可缩放矢量模型
SVG是D3.js主要操作的对象。SVG作为矢量图，不会随着图片的缩放而发生失真。
<svg></svg>标签，画布。
1.1引入SVG
(1）在标签里面
- 设置标题
- 通过script标签导入d3.js库
(2)在body里面
- 创建SVG
- 设置修改SVG的脚本（使用D3）
（3）制作可视化方案，关于HTML的部分仅考虑SVG即可。
1.2一个画圆的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>d3.js——01</title>
<script src='https://d3js.org/d3.v5.min.js'></script>
</head>
<body>
<svg width='960' height='500' id="mainsvg" class="svgs"></svg>
<script>
//在HTML中查找并获取SVG
let mainsvg = d3.select('.svgs');
let maingroup = mainsvg
.append("g") //在svg中添加组标签，即<g>
.attr("transform", `translate(${
100},${
100})`); //将这个组向下方和右方平移100个像素
let circle = maingroup
.append('circle') //在主要组中加入一个圆
.attr('stroke','red') //圆的边框为红色
.attr('r' ,'66') //圆的半径为66像素
.attr('fill','green'); //圆的填充颜色为绿色
</script>
</body>
</html>