d3.js實現(xiàn)自定義多y軸折線圖步驟詳解

前言

需求是實現(xiàn)一個生命體征的體溫單，x軸是時間線，y軸有多個體征項。效果不是特別復(fù)雜，但是行業(yè)特殊性，所以也沒有現(xiàn)成可用的，所以用 d3.js 實現(xiàn)了一個多y軸的折線圖。

基礎(chǔ)

這張圖只用了d3.js的一些最基本用法，數(shù)據(jù)量也比較小，所以也用不到多么牛逼的用法，只涉及到了比例尺 scale ，軸 axis ，畫線和點，最后我添加了一個縮放效果。

效果

在線預(yù)覽

具體實現(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 表示刻度尺寸，設(shè)置為容器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)。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何使用js統(tǒng)計頁面標簽數(shù)量

JS反射與依賴注入使用案例分析

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com