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 ，畫(huà)線和點(diǎn)，最后我添加了一個(gè)縮放效果。
效果
具體實(shí)現(xiàn)
1.初始化一個(gè)svg作為容器，之后所有的點(diǎn)線面都是在這個(gè)容器里邊畫(huà)了
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.以上就完成了畫(huà)布的基本框架，剩下的事情就是數(shù)據(jù)渲染。
該表中，頂部的時(shí)間軸和左側(cè)y軸是自定義加上的，首先在容器中分配出來(lái)兩塊區(qū)域用來(lái)畫(huà)軸；再根據(jù)容器的寬高按比例具體實(shí)現(xiàn)。
源代碼地址：https://github.com/zhangxiongcn/multiple-Y-axis-line-chart
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
prototype與jquery下Ajax實(shí)現(xiàn)的差別
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項(xiàng)目需要用到Ajax，由于主站所用的是Jquey，而某個(gè)欄目的開(kāi)發(fā)用的是prototype，這樣一來(lái)就必須對(duì)JS代碼做調(diào)整了。2009-09-09
原生javascript實(shí)現(xiàn)的ajax異步封裝功能示例
這篇文章主要介紹了原生javascript實(shí)現(xiàn)的ajax異步封裝功能,結(jié)合完整實(shí)例形式分析了原生javascript實(shí)現(xiàn)的ajax異步交互函數(shù)與相應(yīng)的使用方法,需要的朋友可以參考下2016-11-11
人民幣數(shù)字轉(zhuǎn)換成大寫(xiě)形式...2006-12-12
js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
對(duì)于JavaScript數(shù)組去除重復(fù)項(xiàng)，現(xiàn)在有多種方法，其中一種是hash，本文主要對(duì)hash方法去除js數(shù)組重復(fù)項(xiàng)進(jìn)行介紹，下面就跟小編一起來(lái)看下吧2016-12-12
這篇文章主要為大家介紹了GoJs圖形繪圖模板Shape示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
javascript 常用方法 ，比較不錯(cuò)大家可以參考下。2009-06-06
感謝網(wǎng)友“l(fā)iufabin”提出的關(guān)于不支持FF的問(wèn)題，第一個(gè)在FF下經(jīng)過(guò)測(cè)試時(shí)支持的，第二個(gè)中的高度自適應(yīng)不支持，我在網(wǎng)上找了一個(gè)JQUERY的插件2009-05-05
javascript移出節(jié)點(diǎn)removeChild()使用介紹
這篇文章主要介紹了javascript節(jié)點(diǎn)操作移出節(jié)點(diǎn)removeChild()的使用,需要的朋友可以參考下2014-04-04
javascript中的 object 和 function小結(jié)
JavaScript的面向?qū)ο笫腔谠蔚?，所有?duì)象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對(duì)象的實(shí)例。2016-08-08