d3.js实现自定义多y轴折线图的示例代码


Posted in Javascript onMay 30, 2018

前言

需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项。效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图。

基础

这张图只用了d3.js的一些最基本用法,数据量也比较小,所以也用不到多么牛逼的用法,只涉及到了比例尺 scale ,轴 axis ,画线和点,最后我添加了一个缩放效果。

效果

在线预览

d3.js实现自定义多y轴折线图的示例代码

具体实现

1.初始化一个svg作为容器,之后所有的点线面都是在这个容器里边画了

svg.select('#id')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

2.定义比例尺 scale ,定义域 domain 显示的刻度范围,值域 range 实际数据刻度

// x轴以时间为刻度
this.x = d3
 .scaleTime()
 .domain([this.beginTime, this.endTime])
 .range([0, this.width]);

// y轴按照像素值为刻度,所有数据需按照比例转换计算
this.y = d3
 .scaleLinear()
 .domain([0, this.height])
 .range([this.height, 0]);

3.定义轴 axis , axis 需要和 scale 结合使用,作为参数传入 axis(scale)

其中, ticks 表示刻度数量,传入数值即可,注意一点, ticks 默认会取 2,5,10 这三个数中的一个,如果你传入一个其他的数,它会根据实际尺寸找一个接近的值(这里还涉及到倍数情况下,详细了解可查阅官方api);

如果刻度想要自定义需要利用 tickValues([NO1,NO2,NO3...]) 实现; tickSize 表示刻度尺寸,设置为容器svg的宽高即实现了全图标尺效果。

this.xAxis = d3
 .axisTop(this.x)
 // .ticks(d3.timeHour.every(4))
 .tickValues(d3.timeHour.range(this.beginTime, this.endTime, 4))
 .tickSize(this.height)
 .tickFormat(function (d, i) {
  // return d.getHours();
  return;
 });

this.yAxis = d3
 .axisLeft()
 .scale(this.y)
 .tickValues(d3.range(0, this.height, this.height / 40))
 .tickSize(-this.width)
 .tickFormat(function (d, i) {
  return;
 });

4.定义折线模板

// 折线模板
this.line = d3
 .line()
 .x(function (d) {
  return that.x(d.datetime);
 })
 .y(function (d) {
  return that.y(d.svgValue);
 });

5.以上就完成了画布的基本框架,剩下的事情就是数据渲染。

该表中,顶部的时间轴和左侧y轴是自定义加上的,首先在容器中分配出来两块区域用来画轴;再根据容器的宽高按比例具体实现。

源代码地址:https://github.com/zhangxiongcn/multiple-Y-axis-line-chart

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
Angular 数据请求的实现方法
May 07 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
微信小程序实现聊天室
Aug 21 Javascript
React如何创建组件
Jun 27 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 #Javascript
浅谈如何使用webpack构建多页面应用
May 30 #Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 #Javascript
Angular4 反向代理Details实践
May 30 #Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 #Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 #Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 #Javascript
You might like
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
js 居中漂浮广告
2010/03/21 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
小学运动会表扬稿
2014/01/19 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记