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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
实用函数8
2007/11/08 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
机器学习实战之knn算法pandas
2019/06/22 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
SQL语言面试题
2013/08/27 面试题
SQL面试题
2013/12/09 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书