D3.js에서 동적 진행률 표시줄을 구현하는 방법

D3는 데이터 기반 문서입니다. 이번 글에서는 D3.js를 기반으로 동적 진행률 표시줄을 그리는 방법을 주로 소개하는데, 필요하신 분들은 참고하시면 됩니다.

D3의 정식 명칭은 (Data-Driven Documents) 입니다. 데이터로 구동되는 문서임을 알 수 있습니다. 이름은 다소 추상적이지만 간단히 말하면 실제로는 주로 데이터 시각화에 사용되는 JavaScript 함수 라이브러리입니다. JavaScript가 무엇인지 모르신다면 JavaScript를 먼저 배우고 Ruan Yifeng 선생님의 튜토리얼을 추천해주세요. JavaScript 파일의 접미사는 일반적으로 .js이므로 D3를 D3.js라고도 합니다. D3는 간단하고 사용하기 쉬운 다양한 기능을 제공하여 JavaScript에서 데이터 작업의 어려움을 크게 단순화합니다. 기본적으로 JavaScript이므로 모든 기능을 JavaScript를 사용하여 구현할 수 있지만 특히 데이터 시각화에서 작업량을 크게 줄일 수 있습니다. D3는 시각화를 생성하는 복잡한 단계를 몇 가지 간단한 함수로 줄였습니다. 간단한 데이터를 다양하고 멋진 그래픽으로 변환합니다. JavaScript에 대한 기본 지식이 있는 친구라면 쉽게 이해할 수 있을 것입니다.

웹사이트 페이지를 로드하고 양식을 제출할 때 진행률 표시줄은 사용자 경험을 최적화하기 위해 로드 프로세스를 표현하는 데 자주 사용됩니다. 일반적인 진행률 표시줄에는 아래 그림과 같이 직사각형 진행률 표시줄과 원형 진행률 표시줄이 있습니다.

저희는 동적 그래픽 그리기를 실현하기 위해 종종 svg 또는 캔버스를 사용하지만 그리기 과정은 상대적으로 번거롭습니다. 직관적이고 아름다운 진행률 표시줄을 위해 커뮤니티에서는 highcharts/ECharts 등과 같은 성숙한 솔루션도 제공하지만 구성 기반 개발 방식으로는 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"

위 코드는 두 개의 중첩된 원의 그리기 로직을 ​​구현하고, 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(&#39;svg&#39;).append(&#39;g&#39;).attr(&#39;transform&#39;,&#39;translate(480,250)&#39;);
</script>

위 코드는 2단계를 구현합니다.

1 0도를 시작점으로 하는 호 생성자 arcGenerator를 생성합니다.

2. is on the canvas 중앙

현재 캔버스에 요소가 없으므로 다음에는 실제 그래픽을 그려보겠습니다.

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

캔버스 그림에 요소를 추가합니다. endAngle() 기능에 따라 datum() 메서드를 사용하여 끝 각도 2π를 바인딩합니다. 를 요소에 추가하고 경로 d에 호 생성자를 할당합니다. 이는 지정된 배경색으로 호를 생성합니다. 실제 그래픽은 다음과 같습니다.

첫 번째 호가 그려진 다음 svg의 계층적 관계 z-index에 따라 소위 진행률 표시줄이 실제로 덮입니다. 첫 번째 레이어 호 위의 두 번째 호입니다. 같은 방법으로 다음을 얻을 수 있습니다:

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

코드를 실행한 후 다음을 얻을 수 있습니다.

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=&#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(&#39;#2394F5&#39;, &#39;#BDF436&#39;);
     var that = this;
     return function(t) {
      that.style.width = i(t) + &#39;px&#39;;
      that.style.background = ci(t);
     };
    });
  },1500)
 </script>
</body>

实现的效果如下：

 

总结

D3.js를 기반으로 진행률 표시줄을 그리는 핵심 포인트는 그래픽 전환을 올바르게 부드럽게 하기 위한 보간입니다. 직사각형 및 원형 진행률 표시줄을 구현하기 위해 svg 또는 순수 CSS를 사용해야 하는 경우에도 물론 가능하지만 경로 및 애니메이션 처리는 물론 CSS 작성 요구 사항도 훨씬 더 복잡합니다. D3.js를 사용하여 위의 두 가지 진행률 표시줄을 그리는 논리 코드는 거의 모두 js를 사용하여 구현되는 동시에 코드의 양을 약 20줄로 제어할 수 있으며 캡슐화하여 재사용할 수 있음을 관찰했습니다. 이미 매우 세련되었으며 사용자 정의 차트 개발에 매우 ​​유용합니다.

진행률 표시줄의 대시보드 차트 파생 버전의 경우 기본 진행률 표시줄과 비교하여 눈금 설명 및 포인터 계산이 추가되지만 보간법의 원리와 사용법을 익히는 한 동일하게 유지됩니다. 유사한 차트를 쉽게 처리할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

express의 라우팅 규칙과 요청 매개변수 획득 방법을 기반으로

js 중국어 pinyin_javascript 기술의 첫 글자 추출을 위한 패키지 툴 클래스

간단한 사용법에 대한 자세한 설명 vuex

위 내용은 D3.js에서 동적 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!