D3 是什么

D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔。聽名字有點(diǎn)抽象，說簡單一點(diǎn)，其實(shí)就是一個(gè) JavaScript 的函數(shù)庫，使用它主要是用來做數(shù)據(jù)可視化的。如果你不知道什么是 JavaScript ，請先學(xué)習(xí)一下 JavaScript，推薦阮一峰老師的教程。

JavaScript 文件的后綴名通常為 .js，故 D3 也常使用 D3.js 稱呼。D3 提供了各種簡單易用的函數(shù)，大大簡化了 JavaScript 操作數(shù)據(jù)的難度。由于它本質(zhì)上是 JavaScript ，所以用 JavaScript 也是可以實(shí)現(xiàn)所有功能的，但它能大大減小你的工作量，尤其是在數(shù)據(jù)可視化方面，D3 已經(jīng)將生成可視化的復(fù)雜步驟精簡到了幾個(gè)簡單的函數(shù)，你只需要輸入幾個(gè)簡單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。有過 JavaScript 基礎(chǔ)的朋友一定很容易理解它。

在網(wǎng)站頁面加載以及表單提交時(shí)，常使用進(jìn)度條表達(dá)加載過程來優(yōu)化用戶體驗(yàn)，常見的進(jìn)度條有矩形進(jìn)度條和圓形進(jìn)度條，如下圖所示：

我們經(jīng)常使用svg或canvas來實(shí)現(xiàn)動(dòng)態(tài)圖形的繪制，但繪制過程相對較繁瑣。對于直觀漂亮的進(jìn)度條，社區(qū)也有提供成熟的方案例如highcharts/ECharts等等，但基于配置的開發(fā)方式終究無法實(shí)現(xiàn)100%的自定義繪制。本文將帶你使用D3.js從零一步一步實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條，并分享代碼邏輯原理。

基礎(chǔ)要求

• 了解svg如何繪制基礎(chǔ)圖形
• 了解D3.js v4版本
• 了解如何使用D3.js (v4)繪制svg的基礎(chǔ)圖形
  

繪制圓形進(jìn)度條

對于一個(gè)圓形進(jìn)度條，我們先對其進(jìn)行任務(wù)拆分：

• 繪制嵌套圓弧
• 圓心處的實(shí)時(shí)數(shù)據(jù)展示
• 展現(xiàn)動(dòng)畫
• 美化

1.繪制嵌套圓弧

對于圓形，svg提供現(xiàn)成的 circle 標(biāo)簽供使用，但是其劣勢在于，對于圓形進(jìn)度條使用 circle 可以滿足，但對圖形進(jìn)一步擴(kuò)展時(shí)比如繪制半圓， circle 的處理就棘手了。D3.js提供 arc 相關(guān)API對圓形的繪制方法進(jìn)行了封裝：

var arc = d3.arc()
   .innerRadius(180)
   .outerRadius(240)
   //.startAngle(0)
   //.endAngle(Math.PI)
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

上述代碼實(shí)現(xiàn)了對兩個(gè)嵌套圓的繪制邏輯， d3.arc() 返回一個(gè)圓弧構(gòu)造函數(shù)，并通過鏈?zhǔn)秸{(diào)用設(shè)置內(nèi)圓與外圓的半徑大小，起始角度與結(jié)束角度。執(zhí)行 arc() 構(gòu)造函數(shù)即可獲得用于綁定在 <path> 上的路徑數(shù)據(jù)。完整代碼如下：

<!--html-->
<svg width="960" height="500"></svg>
<script>
 var arcGenerator = d3.arc().innerRadius(80).outerRadius(100).startAngle(0);
 var picture = d3.select('svg').append('g').attr('transform','translate(480,250)');
</script>

上述代碼實(shí)現(xiàn)了2個(gè)步驟：

1.生成將0度作為起點(diǎn)的圓弧構(gòu)造器 arcGenerator

2.設(shè)置 transform 圖形偏移量，令圖形在畫布中央

目前畫布上還沒有任何元素，接下來我們實(shí)際圖形的繪制。

var backGround = picture.append("path")
  .datum({endAngle: 2 * Math.PI})
  .style("fill", "#FDF5E6")
  .attr("d", arcGenerator);

我們對畫布 picture 添加 <path> 元素,依據(jù) endAngle() 特性，使用 datum() 方法將 {endAngle:Math.PI} 也就是終點(diǎn)角度 2π 綁定到 <path> 元素上，并將圓弧構(gòu)造器賦值給 path 路徑 d 。這樣就生成了指定背景顏色的圓弧，實(shí)際圖形如下：

第一個(gè)圓弧畫好了，那么依據(jù)svg的層級(jí)關(guān)系 z-index ，所謂的進(jìn)度條其實(shí)就是覆蓋在第一層圓弧之上的第二層圓弧。同理可得：

var upperGround = picture.append('path')
  .datum({endAngle:Math.PI / 2})
  .style('fill','#FFC125')
  .attr('d',arcGenerator)

代碼運(yùn)行后可得：

2.圓心處的實(shí)時(shí)數(shù)據(jù)展示

第一部分我們已經(jīng)實(shí)現(xiàn)了基于兩個(gè) path 的嵌套圓。第二部分我們來實(shí)現(xiàn)圓心處的實(shí)時(shí)數(shù)據(jù)展示。 在進(jìn)度條進(jìn)行加載時(shí)，我們在圓心處添加數(shù)據(jù)來表達(dá)當(dāng)前的加載進(jìn)度，使用 <text> 標(biāo)簽做展示即可：

var dataText = g.append('text')
  .text(12)
  .attr('text-anchor','middle')
  .attr('dominant-baseline','middle')
  .attr('font-size','38px')

暫時(shí)將數(shù)據(jù)設(shè)置為12，并設(shè)置水平居中和垂直居中，效果如下圖：

3.展現(xiàn)動(dòng)畫

通過1，2兩部分內(nèi)容我們已經(jīng)知道了：

• 繪制進(jìn)度條的實(shí)質(zhì)是改變上層弧的角度
• 當(dāng)弧度是 2π 時(shí)為整圓，當(dāng)弧度是 π 時(shí)為半圓
• 圓形中的數(shù)據(jù)即為當(dāng)前弧度相對 2π 的百分比

綜上我們只要改變弧度值和數(shù)值同時(shí)設(shè)定改變過程所需時(shí)長即可實(shí)現(xiàn)所謂"動(dòng)畫"。在ECharts提供的官方實(shí)例中，通過 setInterval 來實(shí)現(xiàn)每隔固定一段時(shí)間進(jìn)行數(shù)據(jù)更新，其實(shí)在D3.js中同樣提供了類似方法來實(shí)現(xiàn)類似 setInterval 的功能：

d3.interval(function(){
 foreground.transition().duration(750).attrTween('d',function(d){
  var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
  return function(t){
   d.endAngle = compute(t);
   return arcGenerator(d);
  }
  
 })
},1000)

對這段代碼進(jìn)行拆解：

• d3.interval() 方法提供了 setInterval() 的功能
• selection.transition.duration() 設(shè)置了當(dāng)前DOM屬性過渡變化為指定DOM屬性的過程所需時(shí)間，毫秒為單位
• transation.attrTween 為插值功能API，那么何謂插值？

概括來說，在給定的離散數(shù)據(jù)中補(bǔ)插函數(shù)，可以使這條連續(xù)函數(shù)通過全部數(shù)據(jù)點(diǎn)。舉個(gè)例子，給定一個(gè)div，想實(shí)現(xiàn)其背景顏色的從左邊紅(red)到右邊綠(green)的線性漸變，每一區(qū)域的色值該如何計(jì)算呢？只需：

var compute = d3.interpolate(d3.rgb(255,0,0),d3.rgb(0,255,0));

compute 即為插值函數(shù)，參數(shù)范圍為[0，1]，只要你輸入該范圍內(nèi)的數(shù)字，那么 compute 函數(shù)將返回對應(yīng)的顏色值。這樣的插值有什么用呢？可看下圖：

假設(shè)上圖的div長度width為100，那么將[0，100]依比例關(guān)系轉(zhuǎn)化為[0，10]的范圍數(shù)據(jù)并輸入 compute 函數(shù)中，即可得到某一區(qū)域?qū)?yīng)的顏色。當(dāng)然，對于線性面積的處理我們不應(yīng)該使用離散數(shù)據(jù)作為輸入和輸出，所以D3.js提供更方便的線性漸變API d3.linear 等，這里就不展開描述了。

言歸正傳，代碼 d3.interpolate(d.endAngle,Math.random() * Math.PI * 2); 實(shí)現(xiàn)了如下插值范圍：

["當(dāng)前角度值"，"隨機(jī)角度值"] //表達(dá)區(qū)間而非數(shù)組

而后返回一個(gè)參數(shù)為 t 的函數(shù)，那么該函數(shù)的作用是什么呢？

t 參數(shù)與 d 類似，是D3.js內(nèi)部實(shí)現(xiàn)的插值，其范圍為[0，1]。 t 參數(shù)根據(jù)設(shè)置的 duration() 時(shí)長自動(dòng)計(jì)算在[0，1]內(nèi)合適的插值數(shù)量，并返回插值結(jié)果,實(shí)現(xiàn)線性平穩(wěn)的過渡動(dòng)畫效果。

完成滾動(dòng)條的動(dòng)畫加載效果，我們接下來寫圓心實(shí)時(shí)數(shù)據(jù)的變化邏輯，只要實(shí)現(xiàn)簡單的賦值即可，完整代碼如下：

d3.interval(function(){
  foreground.transition().duration(750).attrTween('d',function(d){
   var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
   return function(t){
    d.endAngle = compute(t);
    var data = d.endAngle / Math.PI / 2 * 100;
    //設(shè)置數(shù)值
    d3.select('text').text(data.toFixed(0) + '%');
    //將新參數(shù)傳入，生成新的圓弧構(gòu)造器
    return arcGenerator(d);
   }
  })
 },2000)

最終效果如下：

4.美化

1，2，3部分我們實(shí)現(xiàn)了最基本的進(jìn)度條樣式和功能，但樣式看起來還是很單調(diào)的，我們接下來我們對進(jìn)度條進(jìn)行線性漸變處理。我們使用D3.js提供的線性插值A(chǔ)PI：

var colorLinear = d3.scaleLinear().domain([0,100]).range(["#EEE685","#EE3B3B"]);

colorLinear 同樣是一個(gè)插值函數(shù)，我們輸入[0，100]區(qū)間中的數(shù)值，就會(huì)返回對應(yīng)["#EEE685"，"#EE3B3B"]區(qū)間內(nèi)的顏色值。比如當(dāng)進(jìn)度條顯示進(jìn)度為"80%"時(shí)：

var color = colorLinear(80);
//color即為"80%"對應(yīng)的色值

實(shí)現(xiàn)了顏色取值后，我們只需在進(jìn)度條變化時(shí)，將原有顏色改變即可：

d3.interval(function(){
  foreground.transition().duration(750).attrTween('d',function(d){
   var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
   return function(t){
    d.endAngle = compute(t);
    var data = d.endAngle / Math.PI / 2 * 100;
    //設(shè)置數(shù)值
    d3.select('text').text(data.toFixed(0) + '%');
    //將新參數(shù)傳入，生成新的圓弧構(gòu)造器
    return arcGenerator(d);
   }
  })
  .styleTween('fill',function(d){
   return function(t){
    var data = d.endAngle / Math.PI / 2 * 100;
    //返回?cái)?shù)值對應(yīng)的色值
    return colorLinear(data);
   }
  })
 },2000)

styleTween 與 attrTween 類似，是實(shí)現(xiàn)改變樣式的插值函數(shù)。采用鏈?zhǔn)秸{(diào)用的形式同時(shí)對進(jìn)度條數(shù)值和顏色的設(shè)置即可。最終實(shí)現(xiàn)的效果如下：

綜上我們實(shí)現(xiàn)了在不同數(shù)值下顏色變化的圓形進(jìn)度條，可常用于告警，提醒等業(yè)務(wù)場景。

繪制矩形進(jìn)度條

矩形進(jìn)度條相比圓形進(jìn)度條簡單了很多，同樣基于插值原理，平滑改變矩形的長度即可。直接上代碼：

<head>
 <style>
  #slider {
   height: 20px;
   width: 20px;
   background: #2394F5;
   margin: 15px;
  }
 </style>
</head>
<body>
 <div id='slider'></div>
 <script>
  d3.interval(function(){
   d3.select("#slider").transition()
    .duration(1000)
    .attrTween("width", function() {
     var i = d3.interpolate(20, 400);
     var ci = d3.interpolate('#2394F5', '#BDF436');
     var that = this;
     return function(t) {
      that.style.width = i(t) + 'px';
      that.style.background = ci(t);
     };
    });
  },1500)
 </script>
</body>

實(shí)現(xiàn)的效果如下：

總結(jié)

基于D3.js繪制進(jìn)度條的關(guān)鍵點(diǎn)在于插值，從而正確地使圖形平滑過渡。如果一定要使用svg或純css實(shí)現(xiàn)矩形和圓形的進(jìn)度條當(dāng)然也是可行的，但對于路徑和動(dòng)畫的處理，以及css的書寫要求都復(fù)雜了不少。我們觀察到使用D3.js繪制上述兩種進(jìn)度條的邏輯代碼幾乎完全使用js實(shí)現(xiàn)，同時(shí)代碼量可以控制在20行左右并可封裝復(fù)用，已經(jīng)非常精煉了，在自定義圖表開發(fā)上非常有優(yōu)勢。

對于進(jìn)度條的衍生版儀表盤圖表，相比基礎(chǔ)進(jìn)度條增加了刻度描述和指針計(jì)算，但萬變不離其宗，只要掌握插值原理和使用，處理類似圖表都將得心應(yīng)手。

以上所述是小編給大家介紹的基于 D3.js 繪制動(dòng)態(tài)進(jìn)度條的實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評(píng)論