d3.js實現(xiàn)自定義多y軸折線圖的示例代碼
前言
需求是實現(xiàn)一個生命體征的體溫單，x軸是時間線，y軸有多個體征項。效果不是特別復雜，但是行業(yè)特殊性，所以也沒有現(xiàn)成可用的，所以用 d3.js 實現(xiàn)了一個多y軸的折線圖。
基礎
這張圖只用了d3.js的一些最基本用法，數據量也比較小，所以也用不到多么牛逼的用法，只涉及到了比例尺 scale ，軸 axis ，畫線和點，最后我添加了一個縮放效果。
效果
具體實現(xiàn)
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() .domain([0, this.height]) .range([this.height, 0]);
3.定義軸 axis , axis 需要和 scale 結合使用，作為參數傳入 axis(scale) 。
其中， ticks 表示刻度數量，傳入數值即可，注意一點， ticks 默認會取 2,5,10 這三個數中的一個，如果你傳入一個其他的數，它會根據實際尺寸找一個接近的值（這里還涉及到倍數情況下，詳細了解可查閱官方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.以上就完成了畫布的基本框架，剩下的事情就是數據渲染。
該表中，頂部的時間軸和左側y軸是自定義加上的，首先在容器中分配出來兩塊區(qū)域用來畫軸；再根據容器的寬高按比例具體實現(xiàn)。
源代碼地址：https://github.com/zhangxiongcn/multiple-Y-axis-line-chart
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
prototype與jquery下Ajax實現(xiàn)的差別
Ajax技術在web中應用的相當廣泛,最近項目需要用到Ajax，由于主站所用的是Jquey，而某個欄目的開發(fā)用的是prototype，這樣一來就必須對JS代碼做調整了。2009-09-09
原生javascript實現(xiàn)的ajax異步封裝功能示例
這篇文章主要介紹了原生javascript實現(xiàn)的ajax異步封裝功能,結合完整實例形式分析了原生javascript實現(xiàn)的ajax異步交互函數與相應的使用方法,需要的朋友可以參考下2016-11-11
人民幣數字轉換成大寫形式...2006-12-12
下面小編就為大家?guī)硪黄猨s 獲取當前web應用的上下文路徑實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
對于JavaScript數組去除重復項，現(xiàn)在有多種方法，其中一種是hash，本文主要對hash方法去除js數組重復項進行介紹，下面就跟小編一起來看下吧2016-12-12
這篇文章主要為大家介紹了GoJs圖形繪圖模板Shape示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
javascript 常用方法 ，比較不錯大家可以參考下。2009-06-06
感謝網友“l(fā)iufabin”提出的關于不支持FF的問題，第一個在FF下經過測試時支持的，第二個中的高度自適應不支持，我在網上找了一個JQUERY的插件2009-05-05
javascript移出節(jié)點removeChild()使用介紹
這篇文章主要介紹了javascript節(jié)點操作移出節(jié)點removeChild()的使用,需要的朋友可以參考下2014-04-04
javascript中的 object 和 function小結
JavaScript的面向對象是基于原形的，所有對象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對象的實例。2016-08-08