国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

d3.js實現自定義多y軸折線圖的示例代碼

來源:懂視網 責編:小采 時間:2020-11-27 22:13:53
文檔

d3.js實現自定義多y軸折線圖的示例代碼

d3.js實現自定義多y軸折線圖的示例代碼:前言 需求是實現一個生命體征的體溫單,x軸是時間線,y軸有多個體征項。效果不是特別復雜,但是行業特殊性,所以也沒有現成可用的,所以用 d3.js 實現了一個多y軸的折線圖。 基礎 這張圖只用了d3.js的一些最基本用法,數據量也比較小,所以也用不到多么牛逼的
推薦度:
導讀d3.js實現自定義多y軸折線圖的示例代碼:前言 需求是實現一個生命體征的體溫單,x軸是時間線,y軸有多個體征項。效果不是特別復雜,但是行業特殊性,所以也沒有現成可用的,所以用 d3.js 實現了一個多y軸的折線圖。 基礎 這張圖只用了d3.js的一些最基本用法,數據量也比較小,所以也用不到多么牛逼的

前言

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

基礎

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

效果

在線預覽

具體實現

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...]) 實現; tickSize 表示刻度尺寸,設置為容器svg的寬高即實現了全圖標尺效果。

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軸是自定義加上的,首先在容器中分配出來兩塊區域用來畫軸;再根據容器的寬高按比例具體實現。

源代碼地址:https://github.com/zhangxiongcn/multiple-Y-axis-line-chart

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

d3.js實現自定義多y軸折線圖的示例代碼

d3.js實現自定義多y軸折線圖的示例代碼:前言 需求是實現一個生命體征的體溫單,x軸是時間線,y軸有多個體征項。效果不是特別復雜,但是行業特殊性,所以也沒有現成可用的,所以用 d3.js 實現了一個多y軸的折線圖。 基礎 這張圖只用了d3.js的一些最基本用法,數據量也比較小,所以也用不到多么牛逼的
推薦度:
標簽: 折線圖 代碼 y軸
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久免费国产精品一区二区 | 日韩电影免费在线观看视频 | 国产精品一区二区久久不卡 | 日韩免费一区二区三区在线 | 国产在线观看精品 | 亚洲精品一 | 欧美一区二区三区视视频 | 黑人一区二区三区中文字幕 | 欧美日韩精品一区二区三区四区 | 精品日韩欧美国产一区二区 | 91福利一区二区三区 | 国产日韩欧美亚洲综合在线 | 国产精品…在线观看 | 伊人色综合一区二区三区 | 国产精品综合一区二区 | 在线观看视频亚洲 | 国产亚洲一区二区三区在线观看 | 韩日一区二区三区 | 久久久久久夜精品精品免费啦 | 九草伊人 | 欧美精品国产日韩综合在线 | 久久久久久综合成人精品 | 福利一区在线观看 | 亚洲色图 欧美 | 亚洲色图第1页 | 欧美第五页| 欧美日韩高清一本大道免费 | 精品国产日韩亚洲一区91 | 欧美日韩国产一区二区三区不卡 | 女人18毛片a级毛片一区②区 | 视频在线一区 | 国产成人精品一区二区不卡 | 一区二区三区亚洲 | 日韩欧美视频一区 | 免费观看的黄色网址 | 91精品久久久久久久久久 | 成人午夜精品久久久久久久小说 | 亚洲精品午夜国产va久久成人 | 国产精品免费在线播放 | 精品欧美日韩一区二区三区 | 91一区二区在线观看精品 |