d3.js實作自訂多y軸折線圖步驟詳解

這次帶給大家d3.js實作自訂多y軸折線圖步驟詳解，d3.js實作自訂多y軸折線圖的注意事項有哪些，以下就是實戰案例，一起來看一下。

前言

需求是實現一個生命徵象的體溫單，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軸是自訂加上的，首先在容器中分配出來兩塊區域用來畫軸；再根據容器的寬高按比例具體實現。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用js統計頁面標籤數量

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

以上是d3.js實作自訂多y軸折線圖步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！