使用d3.v5实现折线图与面积图
2024-08-21 00:59:48
d3最新是V5版的,比起V2的API变动了不少,写下我实现过程
效果图:
面积图:
折线图:
目录结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css"/>
<title>Linechart1</title>
</head>
<body>
<div id="container"></div> <script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.html
#container{
background: #ddd;
width: 500px;
height: 250px;
} path{
fill: none;
stroke: steelblue;
stroke-width: 2;
} .domain ,.tick line{
stroke:gray;
stroke-width: 1;
}
style.css
var width=500,height=250,
margin={left:50,top:30,right:20,bottom:20},
g_width=width-margin.left-margin.right,
g_height=height-margin.top-margin.bottom; //svg
d3.select("#container").append("svg")
//width,height
.attr("width",width)
.attr("height",height) var g=d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")"); var data=[1,8,5,6,8,9,3,5,2]
//Scale
var scale_x=d3.scaleLinear()
.domain([0,data.length-1])
.range([0,g_width]);
var scale_y=d3.scaleLinear()
.domain([0,d3.max(data)])
.range([g_height,0]); //画线函数
var line_generator= d3.line()
.x(function (d,i) {
return scale_x(i);
})
.y(function (d) {
return scale_y(d);
})
.curve(d3.curveMonotoneX)
// .curve(d3.curveMonotoneX) // apply smoothing to the line //画路径
g.append("path")
.attr("d",line_generator(data)) //d="M1,0L20,40..... d-path data // //画面积函数
// var area_generator= d3.area()
// .x(function (d,i) {
// return scale_x(i);
// })
// .y0(g_height)
// .y1(function (d) {
// return scale_y(d);
// })
// .curve(d3.curveMonotoneX)
//
// //画面积
// g.append("path")
// .attr("d",area_generator(data)) //d="M1,0L20,40..... d-path data
// .style("fill","steelblue") //X轴
g.append("g")
.call(d3.axisBottom(scale_x))
.attr("transform","translate(0,"+g_height+")") //Y轴
g.append("g")
.call(d3.axisLeft(scale_y)) //y轴文字
g.append("text")
.text("Price($)")
.attr("transform","rotate(-90)")
.attr("dy","1em")
.attr("text-anchor","end")
其中,使用红色部分,注释绿色部分是面积图
使用绿色部分,注释红色部分是折线图
data数组是数据来源。
参考教程:https://www.imooc.com/learn/103
最新文章
- js canvas压缩图片上传
- PYTHON学习之路_PYTHON基础(4)
- Codeforces Alpha Round #20 (Codeforces format) C. Dijkstra?(裸的dijkstra)
- android 学习随笔八(异常处理总结)
- css中>;,+,~的用法
- 在SpringMVC框架下建立Web项目时web.xml到底该写些什么呢?
- 自定义绘制View
- C++ Primer Chapter 1
- 搜狐畅游:每月给员工直系长辈2000元爱孝薪_企业新闻_265G产业频道
- 设置不输入密码ssh登录
- iOS UITableView的Section Footer加入button
- 一些小bug
- 由会话信息保存认识ThreadLocal
- SQLServer数据库
- Exception:两个类具有相同的 XML 类型名称,请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称
- SDWebImage之工具类
- 请求数据传入(SpringMVC)
- mybatis分页 -----PageHelper插件
- sqli-labs(十四)(宽字节注入)
- Idea设置类注释模板
热门文章
- SSM-SpringMVC-31:SpringMVC中利用hibernate-validator做后台校验
- SSH免密码登录Linux服务器
- ECS上搭建Docker(CentOS7)
- ES7 Async/Await 陷阱
- JVM学习记录-垃圾收集器
- Python中标准模块importlib详解
- 【UOJ】67 新年的毒瘤 &;【BZOJ】1123 BLO
- 【prufer编码】BZOJ1430 小猴打架
- BZOJ_3969_[WF2013]Low Power_二分答案
- MATLAB——画图(经典)