Detailed explanation of the steps to implement a custom multi-y-axis line chart with d3.js

This time I will bring you a detailed explanation of the steps to implement a custom multi-y-axis line chart with d3.js. What are the precautions for d3.js to implement a custom multi-y-axis line chart? Here are the actual cases. , let’s take a look.

Preface

The requirement is to implement a body temperature sheet with vital signs. The x-axis is the timeline, and the y-axis has multiple physical sign items. The effect is not particularly complex, but due to the particularity of the industry, it is not readily available, so d3.js is used to implement a multi-y-axis line chart.

Basics

This picture only uses some of the most basic uses of d3.js, and the amount of data is relatively small, so it cannot be used What an awesome usage, it only involves scale, axis, drawing lines and points, and finally I added a scaling effect.

Effect

Online preview

Detailed implementation

1. Initialize an svg as a container, and then all points, lines and surfaces will be drawn in this container

svg.select('#id')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

2. Define the scalescale , definition domain domain Displayed scale range, value domainrange Actual data scale

// x轴以时间为刻度
this.x = d3
 .scaleTime()
 .domain([this.beginTime, this.endTime])
 .range([0, this.width]);
// y轴按照像素值为刻度，所有数据需按照比例转换计算
this.y = d3
 .scaleLinear()
 .domain([0, this.height])
 .range([this.height, 0]);

3. Define axis axis , axis needs to be used in conjunction with scale , and is passed in as a parameter axis(scale).

Among them, ticks represents the number of ticks, just pass in the value. Note that ticks will take one of the three numbers 2,5,10 by default , if you pass in another number, it will find a close value based on the actual size (this also involves multiples, please refer to the official API for details);

If you want to customize the scale, you need Use tickValues([NO1,NO2,NO3...]) to achieve; tickSize represents the scale size. Setting it to the width and height of the container svg achieves the full-scale ruler effect.

this.xAxis = d3
 .axisTop(this.x)
 // .ticks(d3.timeHour.every(4))
 .tickValues(d3.timeHour.range(this.beginTime, this.endTime, 4))
 .tickSize(this.height)
 .tickFormat(function (d, i) {
  // return d.getHours();
  return;
 });
this.yAxis = d3
 .axisLeft()
 .scale(this.y)
 .tickValues(d3.range(0, this.height, this.height / 40))
 .tickSize(-this.width)
 .tickFormat(function (d, i) {
  return;
 });

4. Define the polyline template

// 折线模板
this.line = d3
 .line()
 .x(function (d) {
  return that.x(d.datetime);
 })
 .y(function (d) {
  return that.y(d.svgValue);
 });

5. The above completes the basic framework of the canvas, and the remaining thing is data rendering.

In this table, the time axis at the top and the y-axis on the left are customized. First, two areas are allocated in the container to draw the axes; then they are implemented in proportion to the width and height of the container.

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!

Recommended reading:

How to use js to count the number of page tags

JS reflection and dependency injection use case analysis

The above is the detailed content of Detailed explanation of the steps to implement a custom multi-y-axis line chart with d3.js. For more information, please follow other related articles on the PHP Chinese website!