D3 はデータ駆動型のドキュメントです。この記事では、D3.js に基づいて動的プログレス バーを描画する方法を主に紹介します。
D3 とは、名前の通りです。示唆されているように、それがデータによって駆動されるドキュメントであることがわかります。名前は少し抽象的ですが、簡単に言うと、主にデータの視覚化に使用される JavaScript 関数ライブラリです。 JavaScript が何なのかわからない場合は、まず JavaScript を学び、Ruan Yifeng 教師のチュートリアルをお勧めします。 JavaScript ファイルの接尾辞は通常 .js であるため、D3 は D3.js と呼ばれることがよくあります。 D3 は、JavaScript でのデータ操作の難しさを大幅に軽減する、シンプルで使いやすいさまざまな機能を提供します。本質的に JavaScript であるため、すべての関数を JavaScript を使用して実装できますが、特にデータ視覚化において、D3 では視覚化を生成する複雑な手順がいくつかの単純な関数に削減されるため、作業負荷が大幅に軽減されます。シンプルなデータをさまざまな美しいグラフィックに変換します。 JavaScript の基本的な知識がある友人なら、簡単に理解できるでしょう。
svgが基本的なグラフィックスを描画する方法を理解する
D3.js v4バージョンを理解する
円形のプログレスバーの場合、まずタスクを分割します:
ネストされた円弧を描く円の中心にリアルタイムデータを表示
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π をバインドします。を
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. アニメーションを表示します
通过1，2两部分内容我们已经知道了：
绘制进度条的实质是改变上层弧的角度
当弧度是 2π 时为整圆，当弧度是 π 时为半圆
圆形中的数据即为当前弧度相对 2π 的百分比
综上我们只要改变弧度值和数值同时设定改变过程所需时长即可实现所谓"动画"。在ECharts提供的官方实例中，通过 setInterval 来实现每隔固定一段时间进行数据更新，其实在D3.js中同样提供了类似方法来实现类似 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)对这段代码进行拆解：
d3.interval() 方法提供了 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='slider'></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 を使用して上記 2 つのプログレス バーを描画するためのロジック コードは、ほぼすべて js を使用して実装されていることがわかりました。同時に、コードの量は約 20 行で制御でき、カプセル化して再利用できます。すでに非常に洗練されており、カスタム チャートの開発に非常に役立ちます。
進行状況バーのダッシュボード チャートの派生バージョンでは、基本的な進行状況バーと比較して、スケールの説明とポインターの計算が追加されていますが、補間の原理と使用法をマスターしている限り、同じままになります。同様のチャートを簡単に処理できるようになります。
上記は私があなたのためにまとめたものです。
関連記事:
ルーティングルールとexpressでのリクエストパラメータの取得方法をベースに
中国語ピンインの頭文字を抽出するためのjsパッケージツールクラス_javascriptスキル
以上がD3.js で動的なプログレスバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
