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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
js给table赋值的实例代码
Oct 13 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
React更新渲染原理深入分析
Dec 24 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模板页面中分页代码的解析
2009/02/06 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
简单实现jQuery手风琴效果
2017/08/18 jQuery
nodejs读取并去重excel文件
2018/04/22 NodeJs
Javascript实现秒表计时游戏
2020/05/27 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python 多线程应用介绍
2012/12/19 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python绘制地震散点图
2019/06/18 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
文秘应聘自荐书范文
2014/02/18 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
感恩教育观后感
2015/06/17 职场文书
婚宴领导致辞
2015/07/28 职场文书
如何写好闭幕词
2019/04/02 职场文书
创业计划书之便利店
2019/09/05 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL