前言

要求是实现一个生命体征的体温列表，X轴为时间轴，Y轴有多个体征项。效果不是特别复杂，但是行业特殊，所以没有现成的，所以用d3.js实现了多Y轴折线图。

基础

这张图只使用了d3.js的一些最基本的用法，数据量比较少，所以没有使用什么牛逼的用法，只涉及比例、轴、画线、点。最后，我添加了缩放效果。

影响

在线预览

具体实现

1.将svg初始化为一个容器，然后在这个容器中绘制所有的点、线和平面

Svg。选择(' # id ')。追加(' SVG ')。attr ('width '，width)。attr('高度'，高度)2。定义比例，定义按域显示的比例范围，以及数值范围的实际数据比例

//x轴用时间标记。这个。x=D3。scaletime()。域([这个。开始的时候，这个。endtime])。范围([0，这个。宽度])；//y轴按像素值缩放，所有数据都要按比例转换计算。这个。y=d3。scalelinear()。域([0，这。高度])。范围([这个。高度，0])；3.定义轴轴，需要与比例结合使用，作为参数传入轴(比例)。

其中，刻度代表刻度数，可以传入数值。请注意，默认情况下，刻度将取三个数字2、5和10中的一个。如果传入另一个数字，它会根据实际大小找到一个接近值(倍数的情况，请参考官方API)；详情见)；

TickValues([NO1，NO2，NO3.】)应用于定制刻度。TickSize表示比例大小，它被设置为容器svg的宽度和高度，以实现全比例效果。

this.xAxis=d3。axisTop(this.x) //。刻度(d3.timeHour.every(4))。tick values(D3 . time hour . range(this . begintime，this.endTime，4))。tickSize(this.height)。tickFormat(函数(d，i) { //返回d . gethours()；返回；});this.yAxis=d3。axisLeft()。刻度(这个y)。tickValues(d3.range(0，this.height，this.height/40))。tickSize(-this.width)。tickFormat(函数(d，I){ return；});4.定义折线模板

//折线模板this.line=d3.line()。x(函数(d){返回那个. x(d . datetime)；}) .y(函数(d) {返回那个. y(d . SVgVaLue)；});5.这就完成了canvas的基本框架，剩下的就是数据渲染。

在该表中，顶部时间轴和左侧y轴是自定义添加的。首先，容器中分配了两个区域用于绘制轴；根据容器的宽度和高度。

源代码地址：https://github.com/zhangxiongcn/multiple-Y-axis-line-chart

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。