js折线图设置y轴刻度_d3.js实现自定义多y轴折线图步骤详解

这次给大家带来d3.js实现自定义多y轴折线图步骤详解，d3.js实现自定义多y轴折线图的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

需求是实现一个生命体征的体温单，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()

.domai