Practice of Graphical Development 03-D3.js - Add Axis & demo to svg to Slide Axis

Graphical Development (IV) 03-D3.js Practice - Add Axis & demo to svg - Slide Axis


Axis is a graphic that occurs frequently in visualized graphs and consists of a number of columns, segments, and scales. Axis are not ready-made graphic elements in SVG and need to be composed of other combinations of elements. D3 provides components for the axis, so drawing the axis in SVG canvas becomes as simple as adding a common element.

There are six basic graphics in the predefined elements of the SVG canvas:

  • rectangle
  • circular
  • Ellipse
  • line segment
  • Broken line
  • polygon

In addition, there is a special and most powerful element:

  • Route

All graphics in the canvas are made up of these seven elements.

Obviously, there is no such element as a coordinate axis. If there is one, we can define it in a similar way:

<axis x1="" x2="" ...></axis>

Unfortunately, there is no such element. However, this design makes sense: it is impossible to have a single element for each graphic, and the SVG will be too large.

Therefore, we need to combine other elements to form a coordinate axis that eventually becomes something like the following:

<!-- First scale -->
<line></line>   <!-- Line of the first scale -->
<text></text>   <!-- Text for the first scale -->
<!-- Second scale -->
<line></line>   <!-- Line of second scale -->
<text></text>   <!-- Text for second scale -->
<!-- Axis of coordinate axis -->

Grouped elements are elements in the SVG canvas, meaning group. This element is a container for grouping other elements, where other elements of the axis are grouped together.

If you need to add these elements manually, it's too cumbersome. To do this, D3 provides a component: d3.svg.axis(). It does the above for us.

Define axes

The concept of scale was mentioned in the previous chapter. Scales are often used together to generate coordinate axes. Below, a component of the axis is added based on the data and scale in the previous chapter.

var dataset = [1, 2, 3, 4, 5];  // Data Source x

// Scale makes the chart more intuitive and reasonable

var min = d3.min(dataset);
var max = d3.max(dataset);

// console.log(max)

// scaleLinear can define scale domain range
var linear = d3.scaleLinear().domain([0, max]).range([0, 300]);

// Add Axis
var xAxis = d3.axisBottom(linear);
Add axes to svg

After defining the axis, you only need to add a grouping element to the SVG, and then add other elements of the axis to this. The code is as follows:


Move your axis demo

Effect-Axis slides left and right


<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        #update {
            position: absolute;
            top: 10px;
            left: 10px;

    <button id="update">To update</button>
    <script src=""></script>

        // 1.Add Canvas
        var width = 960;
        var height = 500;

        var svg ='body').append('svg').attr('width', width).attr('height', height)

        // Complete Static Axis
        // Linear Scale
        var scale = d3.scaleLinear().domain([0, 100]).range([100, 860]);

        var axis = d3.axisBottom(scale);

        var g = svg.append('g').attr('id', 'g').call(axis);

        // Binding Events'#update').on('click', function() {
            // Update Data
            scale.domain([0, Math.random() * 100]);
            // transition d3 provides default animation



Tags: html5 html Visualization

Posted on Tue, 21 Sep 2021 12:46:22 -0400 by meanrat