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