前言
需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项。效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图。
基础
这张图只用了d3.js的一些最基本用法,数据量也比较小,所以也用不到多么牛逼的用法,只涉及到了比例尺scale,轴axis,画线和点,最后我添加了一个缩放效果。
效果
具体实现
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结合使用,作为