D3.js implements dynamic dashboard case-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

D3.js implements dynamic dashboard case

php中世界最好的语言

Apr 08, 2018 am 11:10 AM

javascript dash board

This time I will bring you a case of implementing a dynamic dashboard with D3.js. What are the precautions for implementing a dynamic dashboard with D3.js? The following is a practical case, let’s take a look.

This article introduces an example of D3.js implementing a simple and practical dynamic dashboard, and shares it with everyone. The details are as follows:

Dynamic renderings:

Dashboard Rendering

If you look closely at the dynamic rendering above, you can find:

When a value changes to a new value, it is a gradient The process;
There is a vertical line at the end of the arc, which serves as the pointer of the dashboard. When the value of the dashboard changes, there is a flexible animation effect.

At first, I used Echarts to implement the dashboard, but it could not meet the above two requirements. So I later changed to using D3.js.

D3.js can perfectly customize charts and perfectly meet our needs in terms of details.

Initialize the dashboard

1. First define an svg element:

<svg id="myGauge" width="80" height="108" ></svg>

Copy after login

Then, declare some variables for initialization:

var width=80, 
  height=108,  //svg的高度和宽度，也可以通过svg的width、height属性获取
  innerRadius = 22,
  outerRadius = 30, //圆弧的内外半径
  arcMin = -Math.PI*2/3,
  arcMax = Math.PI*2/3, //圆弧的起始角度和终止角度

Copy after login

2. Create an arc method and set all properties except endAngle. When creating an arc, pass an object containing the endAngle property to this method to calculate the SVG path for a given angle.

var arc = d3.arc()
  .innerRadius(22)
  .outerRadius(30)
  .startAngle(arcMin)

Copy after login

How to set the arc angle?

Corresponding a circle to a clock, then the angle corresponding to 12 o'clock is 0, the angle at 3 o'clock clockwise is Math.PI/2, and the angle at 6 o'clock counterclockwise is -Math.PI . Therefore, the arc shape from -Math.PI*2/3 to Math.PI*2/3 is as shown in the rendering above. For more information, refer to arc.startAngle in the API documentation.

3. Get the SVG elements and convert the origin to the center of the canvas, so that we don’t need to specify their positions separately when creating arcs later

var svg = d3.select("#myGauge")
var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Copy after login

4. Add a dashboard The text (title, value, unit) in

//添加仪表盘的标题
g.append("text").attr("class", "gauge-title")
  .style("alignment-baseline", "central") //相对父元素对齐方式
  .style("text-anchor", "middle") //文本锚点，居中
  .attr("y", -45)  //到中心的距离
  .text("CPU占用率");
//添加仪表盘显示的数值，因为之后还要更新，所以声明一个变量
var valueLabel = g.append("text").attr("class", "gauge-value")
  .style("alignment-baseline", "central") //相对父元素对齐方式
  .style("text-anchor", "middle") //文本锚点，居中
  .attr("y", 25)  //到中心的距离
  .text(12.65); 
//添加仪表盘显示数值的单位      
g.append("text").attr("class", "gauge-unity")
  .style("alignment-baseline", "central") //相对父元素对齐方式
  .style("text-anchor", "middle") //文本锚点，居中
  .attr("y", 40)  //到中心的距离
  .text("%");

Copy after login

Compared with the Canvas drawn by Echarts, a very important advantage of the SVG image produced by D3 is that the SVG style can be defined with CSS. For example, the style of the dashboard title here is as follows:

.gauge-title{
  font-size: 10px;
  fill: #A1A6AD;
}

Copy after login

5. Add a background arc

//添加背景圆弧
var background = g.append("path")
  .datum({endAngle:arcMax}) //传递endAngle参数到arc方法
  .style("fill", "#444851")
  .attr("d", arc);

Copy after login

6. Add an arc representing the percentage, where percentage is the percentage to be expressed, from 0 to decimals of 1.

//计算圆弧的结束角度
var currentAngle = percentage*(arcMax-arcMin) + arcMin
//添加另一层圆弧，用于表示百分比
var foreground = g.append("path")
  .datum({endAngle:currentAngle})
  .style("fill", "#444851")
  .attr("d", arc);

Copy after login

7. Add a pointer mark at the end of the arc

var tick = g.append("line")
  .attr('class', 'gauge-tick')
  .attr("x1", 0)
  .attr("y1", -innerRadius)
  .attr("x2", 0)
  .attr("y2", -(innerRadius + 12)) //定义line位置，默认是在圆弧正中间，12是指针的长度
  .style("stroke", "#A1A6AD")
  .attr('transform', 'rotate('+ angleToDegree(currentAngle) +')')

Copy after login

The parameter in rotate is the degree, and Math.PI corresponds to 180, so you need to customize an angleToDegree method to convert the currentAngle.

At this point, an SVG dashboard has been created, but it is still. So how to update this dashboard?

Update Dashboard

Need to update: arc representing the new percentage; the value below the arc.

Modifying the value below the arc is very simple:

valueLabel.text(newValue)

Copy after login

Updating the arc is a little more troublesome. The specific idea is: modify the endAngle of the arc, and modify the transform value of the pointer at the end of the arc.

During the implementation process, the API that needs to be used:

selection.transition:

https://github.com/d3/d3-transition/blob/master/ README.md#selection_transitiontransition.attrTween：https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween
d3.interpolate：https://github.com/ d3/d3-interpolate/blob/master/README.md#interpolate

1. Update the arc, where angle is the end angle of the new arc.

//更新圆弧，并且设置渐变动效
foreground.transition()
  .duration(750)
  .ease(d3.easeElastic)  //设置来回弹动的效果
  .attrTween("d", arcTween(angle));

Copy after login

arcTween method is defined as follows. It returns a tween (gradient) animation method of the d attribute, which makes an arc gradient from the current angle to a new angle.

arcTween(newAngle) {
  let self=this
  return function(d) {
    var interpolate = d3.interpolate(d.endAngle, newAngle); //在两个值间找一个插值
    return function(t) {
      d.endAngle = interpolate(t);  //根据 transition 的时间 t 计算插值并赋值给endAngle
      return arc(d); //返回新的“d”属性值
    }; 
  };
}

Copy after login

For a more detailed description of this method, please refer to the comments in Arc Tween.

2. The principle of updating the pointer at the end of the arc is the same as above, where oldAngle is the end angle of the old arc.

//更新圆弧末端的指针标记，并且设置渐变动效      
tick.transition()
  .duration(750)
  .ease(d3.easeElastic)  //设置来回弹动的效果
  .attrTween('transform', function(){ //设置“transform”属性的渐变，原理同上面的arcTween方法
    var i = d3.interpolate(angleToDegree(oldAngle), angleToDegree(newAngle));  //取插值
    return function(t) {
      return 'rotate('+ i(t) +')'
    };
  })

Copy after login

At this point, we have successfully created a dynamically refreshed and beautiful SVG dashboard.

End

Every time I use D3.js, I can’t help but feel that it is so powerful and interesting~ It is like a treasure chest, allowing us to maximize meet needs.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7733

Java Tutorial

1643

CakePHP Tutorial

1397

Laravel Tutorial

1290

PHP Tutorial

1233

Related knowledge

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

Steps to draw dashboard using ECharts and Python interface Dec 18, 2023 am 08:40 AM

The steps to draw a dashboard using ECharts and Python interface require specific code examples. Summary: ECharts is an excellent data visualization tool that can easily perform data processing and graphics drawing through the Python interface. This article will introduce the specific steps to draw a dashboard using ECharts and Python interface, and provide sample code. Keywords: ECharts, Python interface, dashboard, data visualization Introduction Dashboard is a commonly used form of data visualization, which uses

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

See all articles