d3.js實(shí)現(xiàn)自定義多y軸折線圖的示例代碼
前言
需求是實(shí)現(xiàn)一個(gè)生命體征的體溫單，x軸是時(shí)間線，y軸有多個(gè)體征項(xiàng)。效果不是特別復(fù)雜，但是行業(yè)特殊性，所以也沒(méi)有現(xiàn)成可用的，所以用 d3.js 實(shí)現(xiàn)了一個(gè)多y軸的折線圖。
基礎(chǔ)
這張圖只用了d3.js的一些最基本用法，數(shù)據(jù)量也比較小，所以也用不到多么牛逼的用法，只涉及到了比例尺 scale ，軸 axis ，畫線和點(diǎn)，最后我添加了一個(gè)縮放效果。
效果
具體實(shí)現(xiàn)
1.初始化一個(gè)svg作為容器，之后所有的點(diǎn)線面都是在這個(gè)容器里邊畫了
svg.select('#id')
.append('svg')
.attr('width', width)
.attr('height', height)
2.定義比例尺 scale ，定義域 domain 顯示的刻度范圍,值域 range 實(shí)際數(shù)據(jù)刻度
// x軸以時(shí)間為刻度 this.x = d3 .scaleTime() .domain([this.beginTime, this.endTime]) .range([0, this.width]); // y軸按照像素值為刻度，所有數(shù)據(jù)需按照比例轉(zhuǎn)換計(jì)算 this.y = d3 .scaleLinear() .domain([0, this.height]) .range([this.height, 0]);
3.定義軸 axis , axis 需要和 scale 結(jié)合使用，作為參數(shù)傳入 axis(scale) 。
其中， ticks 表示刻度數(shù)量，傳入數(shù)值即可，注意一點(diǎn)， ticks 默認(rèn)會(huì)取 2,5,10 這三個(gè)數(shù)中的一個(gè)，如果你傳入一個(gè)其他的數(shù)，它會(huì)根據(jù)實(shí)際尺寸找一個(gè)接近的值（這里還涉及到倍數(shù)情況下，詳細(xì)了解可查閱官方api）；
如果刻度想要自定義需要利用 tickValues([NO1,NO2,NO3...]) 實(shí)現(xiàn)； tickSize 表示刻度尺寸，設(shè)置為容器svg的寬高即實(shí)現(xiàn)了全圖標(biāo)尺效果。
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.以上就完成了畫布的基本框架，剩下的事情就是數(shù)據(jù)渲染。
該表中，頂部的時(shí)間軸和左側(cè)y軸是自定義加上的，首先在容器中分配出來(lái)兩塊區(qū)域用來(lái)畫軸；再根據(jù)容器的寬高按比例具體實(shí)現(xiàn)。
源代碼地址：https://github.com/zhangxiongcn/multiple-Y-axis-line-chart
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作示例
這篇文章主要介紹了JavaScript強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了javascript字符串、數(shù)字等顯示類型轉(zhuǎn)換,以及運(yùn)算、判斷等情況下的隱式類型轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單的四則運(yùn)算計(jì)算器完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的四則運(yùn)算計(jì)算器,結(jié)合完整實(shí)例形式分析了javascript基于表單相應(yīng)實(shí)現(xiàn)加減乘除數(shù)學(xué)運(yùn)算的操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了Javascript 虛擬 DOM，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
ES6中解構(gòu)賦值實(shí)現(xiàn)變量批量賦值解放雙手
這篇文章主要為大家介紹了ES6中解構(gòu)賦值實(shí)現(xiàn)變量批量賦值解放雙手，變量的解構(gòu)賦值，聽起來(lái)很復(fù)雜，簡(jiǎn)單點(diǎn)說(shuō)可以理解成批量操作變量賦值2022-04-04
Easyui Tree獲取當(dāng)前選擇節(jié)點(diǎn)的所有頂級(jí)父節(jié)點(diǎn)
這篇文章主要介紹了Easyui Tree獲取當(dāng)前選擇節(jié)點(diǎn)的所有頂級(jí)父節(jié)點(diǎn),以及easyUI Tree顯示選中節(jié)點(diǎn)的所有父節(jié)點(diǎn)的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-02-02
小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JS實(shí)現(xiàn)即點(diǎn)即編輯功能代碼
以前在網(wǎng)上都看到過(guò)類似的功能，不過(guò)沒(méi)自己想要實(shí)現(xiàn)過(guò)，這次剛好做靜態(tài)頁(yè)面中有這樣的一個(gè)需求，就試著自己做做看，做完發(fā)現(xiàn)也不是什么很難的事情。2008-10-10
微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時(shí)間選擇器時(shí),獲取到的時(shí)間可能是一個(gè)時(shí)間戳,這并不是我們想要的,這時(shí)候我們得將獲取到的時(shí)間戳進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的打印表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript面向?qū)ο笾接徐o態(tài)變量實(shí)例分析
這篇文章主要介紹了JavaScript面向?qū)ο笾接徐o態(tài)變量,結(jié)合實(shí)例形式分析了私有靜態(tài)變量的定義與使用方法,需要的朋友可以參考下2016-01-01