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对内存分配及管理机制详细解析
Nov 11 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
详细解读Python中的__init__()方法
2015/05/02 Python
快速了解Python相对导入
2018/01/12 Python
python中的随机函数小结
2018/01/27 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python多进程间通信代码实例
2019/09/30 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python实现mean-shift聚类算法
2020/06/10 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
法学专业大学生实习自我鉴定
2014/10/05 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP