D3.js は動的なプログレスバーの例を実装します-jsチュートリアル-php.cn

D3の正式名称は(Data-DrivenDocument)その名の通り、データ駆動型のドキュメントであることが分かります。名前は少し抽象的ですが、簡単に言うと、主にデータの視覚化に使用される JavaScript 関数ライブラリです。 JavaScript が何なのかわからない場合は、まず JavaScript を学び、Ruan Yifeng 教師のチュートリアルをお勧めします。

JavaScript ファイルの接尾辞は通常 .js であるため、D3 は D3.js と呼ばれることがよくあります。 D3 は、JavaScript でのデータ操作の難しさを大幅に軽減する、シンプルで使いやすいさまざまな機能を提供します。本質的に JavaScript であるため、すべての関数を JavaScript を使用して実装できますが、特にデータ視覚化において、D3 では視覚化を生成する複雑な手順がいくつかの単純な関数に削減されるため、作業負荷が大幅に軽減されます。シンプルなデータをさまざまな美しいグラフィックに変換します。 JavaScript の基本的な知識がある友人なら、簡単に理解できるでしょう。

動的なグラフィックを描画するために svg または Canvas をよく使用しますが、描画プロセスは比較的面倒です。直感的で美しいプログレスバーについては、コミュニティはハイチャート/Eチャートなどの成熟したソリューションも提供していますが、構成ベースの開発方法では 100% カスタマイズされた描画を実現することはできません。この記事では、D3.js を使用して動的なプログレスバーを最初から実装する方法を段階的に説明し、コードロジックの原則を共有します。

基本要件

svg が基本的なグラフィックスを描画する方法を理解する
D3.js v4 バージョンを理解する
D3.js (v4) を使用して svg の基本的なグラフィックスを描画する方法を理解する

描く円のプログレスバー

円形のプログレスバーの場合、最初にタスクを分割します:

ネストされた円弧を描く
円の中心にリアルタイムデータを表示する
アニメーションを表示する
美化

1. ネストされた円弧を描画します

円の場合、svg は使用できる既製の円タグを提供しますが、その欠点は、円を円形のプログレスバーに使用できることですが、描画などのグラフィックスをさらに拡張する場合です。半円、円の処理は難しいです。 D3.js は、円描画メソッドをカプセル化するための円弧関連 API を提供します。

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

ログイン後にコピー

上記のコードは、2 つのネストされた円の描画ロジックを実装します。 d3.arc() は、円弧コンストラクターを返し、内側の半径を設定するチェーン呼び出しを渡します。外側の円、開始角度と終了角度。 arc() コンストラクターを実行して、にバインドするためのパスデータを取得します。完全なコードは次のとおりです:

<!--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>

ログイン後にコピー

上記のコードは 2 つのステップを実装します:

1. 開始点として 0 度で円弧ジェネレーター arcGenerator を生成します

2. グラフィックが中央に来るように変換グラフィックオフセットを設定します。キャンバスの

現時点ではまだキャンバス上に要素が無いので、実際のグラフィックを描いてみましょう。

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

ログイン後にコピー

endAngle() 機能に従って、datum() メソッドを使用して、終了角度 2π をにバインドします。 ;path> 要素、および arc コンストラクターはパス path d を割り当てます。これにより、指定された背景色で円弧が生成されます。実際のグラフィックは次のとおりです。

最初の円弧が描画され、その後、svg の階層関係 z-index に従って、いわゆるプログレスバーが実際に覆われます。最初のレイヤー円弧の上の 2 番目の円弧。同様に、次の結果が得られます:

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

ログイン後にコピー

コードを実行すると、次の結果が得られます:

2. 円の中心にリアルタイムのデータ表示

最初の部分では、 2 つのパスに基づくネストされた円。後半では、円の中心にリアルタイムデータ表示を実装します。進行状況バーの読み込み中に、現在の読み込み進行状況を表すデータを円の中心に追加し、表示にタグを使用します:

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

ログイン後にコピー

一時的にデータを 12 に設定し、水平方向の中央揃えを設定します。垂直方向のセンタリング、効果は以下のとおりです:

3. アニメーションの表示

2 つのパート 1 と 2 ですでにわかっています:

プログレスバーの描画の本質は、上部の角度を変更することです。 arc
ラジアンが 2π の場合は完全な円、ラジアンが π の場合は半円になります。要約すると、必要なのは 2π に対する現在のラジアンの割合です。ラジアン値や数値を変更し、その変更に要する時間を設定する、いわゆる「アニメーション」を実現できます。 ECharts が提供する公式の例では、setInterval を使用して一定の間隔でデータを更新します。実際、D3.js も setInterval と同様の関数を実装する同様のメソッドを提供します。 () メソッドは setInterval() の関数を提供します
selection.transition.duration() は現在の DOM 属性から指定された DOM 属性への遷移に必要な時間をミリ秒単位で設定します

transation.attrTween は補間関数API では補間とは何でしょうか？

概括来说，在给定的离散数据中补插函数，可以使这条连续函数通过全部数据点。举个例子，给定一个p，想实现其背景颜色的从左边红(red)到右边绿(green)的线性渐变，每一区域的色值该如何计算呢？只需：

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

ログイン後にコピー

compute 即为插值函数，参数范围为[0，1]，只要你输入该范围内的数字，那么 compute 函数将返回对应的颜色值。这样的插值有什么用呢？可看下图：

假设上图的p长度width为100，那么将[0，100]依比例关系转化为[0，10]的范围数据并输入 compute 函数中，即可得到某一区域对应的颜色。当然，对于线性面积的处理我们不应该使用离散数据作为输入和输出，所以D3.js提供更方便的线性渐变API d3.linear 等，这里就不展开描述了。

言归正传，代码 d3.interpolate(d.endAngle,Math.random() * Math.PI * 2); 实现了如下插值范围：

["当前角度值"，"随机角度值"] //表达区间而非数组

而后返回一个参数为 t 的函数，那么该函数的作用是什么呢？

t 参数与 d 类似，是D3.js内部实现的插值，其范围为[0，1]。 t 参数根据设置的 duration() 时长自动计算在[0，1]内合适的插值数量，并返回插值结果,实现线性平稳的过渡动画效果。

完成滚动条的动画加载效果，我们接下来写圆心实时数据的变化逻辑，只要实现简单的赋值即可，完整代码如下：

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;
    //设置数值
    d3.select('text').text(data.toFixed(0) + '%');
    //将新参数传入，生成新的圆弧构造器
    return arcGenerator(d);
   }
  })
 },2000)

ログイン後にコピー

最终效果如下：

4.美化

1，2，3部分我们实现了最基本的进度条样式和功能，但样式看起来还是很单调的，我们接下来我们对进度条进行线性渐变处理。我们使用D3.js提供的线性插值API：

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

ログイン後にコピー

colorLinear 同样是一个插值函数，我们输入[0，100]区间中的数值，就会返回对应["#EEE685"，"#EE3B3B"]区间内的颜色值。比如当进度条显示进度为"80%"时：

var color = colorLinear(80);
//color即为"80%"对应的色值

ログイン後にコピー

实现了颜色取值后，我们只需在进度条变化时，将原有颜色改变即可：

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;
    //设置数值
    d3.select('text').text(data.toFixed(0) + '%');
    //将新参数传入，生成新的圆弧构造器
    return arcGenerator(d);
   }
  })
  .styleTween('fill',function(d){
   return function(t){
    var data = d.endAngle / Math.PI / 2 * 100;
    //返回数值对应的色值
    return colorLinear(data);
   }
  })
 },2000)

ログイン後にコピー

styleTween 与 attrTween 类似，是实现改变样式的插值函数。采用链式调用的形式同时对进度条数值和颜色的设置即可。最终实现的效果如下：

综上我们实现了在不同数值下颜色变化的圆形进度条，可常用于告警，提醒等业务场景。

绘制矩形进度条

矩形进度条相比圆形进度条简单了很多，同样基于插值原理，平滑改变矩形的长度即可。直接上代码：

<head>
 <style>
  #slider {
   height: 20px;
   width: 20px;
   background: #2394F5;
   margin: 15px;
  }
 </style>
</head>
<body>
 <p id=&#39;slider&#39;></p>
 <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>

ログイン後にコピー

实现的效果如下：

总结

基于D3.js绘制进度条的关键点在于插值，从而正确地使图形平滑过渡。如果一定要使用svg或纯css实现矩形和圆形的进度条当然也是可行的，但对于路径和动画的处理，以及css的书写要求都复杂了不少。我们观察到使用D3.js绘制上述两种进度条的逻辑代码几乎完全使用js实现，同时代码量可以控制在20行左右并可封装复用，已经非常精炼了，在自定义图表开发上非常有优势。

对于进度条的衍生版仪表盘图表，相比基础进度条增加了刻度描述和指针计算，但万变不离其宗，只要掌握插值原理和使用，处理类似图表都将得心应手。