引言
最近项目中有个新feature需要画一个业务流程的拓扑图,需要用到d3绘制,在这里记录一下学习过程,由于对前端不太熟悉,svg也是刚接触,所以进度感人(手动滑稽),好,进入正题,本篇使用d3完成一个简单的柱状图。
D3 柱状图
首先造一点json格式的数据:
data.json
{
"data":[
{"value":123},
{"value":432},
{"value":432},
{"value":432},
{"value":333},
{"value":134},
{"value":222}
]}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/d3.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script src="js/test.js"></script>
</body>
</html>
引入jQuery的原因是d3 v5