Angular 7 D3|D3 Axes|Axes in D3|D3|D3 Part12

Axes in D3 Using Angular 7

Before we start to Axes in D3 refer

• D3 Part 1 - SVG Shapes.
• D3 Part 2-  D3 + Angular 7 Integration .
• D3 Part 3-  D3 Data Bound to DOM Elements.
• D3 Part 4-  D3 Creating SVG Elements Based on Data.
• D3 Part 5-  D3 SVG Coordinate Space.
• D3 Part 6-  Data Structures Using D3.
• D3 Part 7-  Dynamic SVG Coordinate Space Using D3.
• D3 Part 8-  Basic D3 Array Utilities.
• D3 Part 9-  SVG Group Element.
• D3 Part 10-  SVG Text Element.
• D3 Part 11-  SVG Linear Scales.

Axes in D3

In this lab, we will learn to create axes using scales in D3. The axes render readable reference marks for scales. Graphs have two axes: the horizontal (X-Axis)  and the vertical (Y-axis) axis. D3 provides functions to draw axes. An axis is made of lines, ticks, and labels. An axis uses a scale so each axis will need to be given a scale to work with.

D3 provides the following functions to draw axes.

• d3.axisTop()
• d3.axisRight()
• d3.axisBottom()
• d3.axisLeft()

d3.axisTop()

Constructs a new top-oriented axis generator for the given scale

d3.axisRight()

Constructs a new right-oriented axis generator for the given scale

d3.axisBottom()

Constructs a new bottom-oriented axis generator for the given scale

d3.axisLeft()

Constructs a new left-oriented axis generator for the given scale

Top Axis

topaxis() {
let width = 400, height = 100;
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];
var topscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);
let svgoftopaxes = d3.select('#Topaxiselement').append('svg').attr('width', width).attr('height', height);
let gaxistop = svgoftopaxes.append("g").attr("transform", "translate(50, 20)");
let top_axis = d3.axisTop().scale(topscale);
gaxistop.call(top_axis);
}

Top Axis Output 

Bottom Axis

bottomaxis(){
let width = 400, height = 100;
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];
var Bottomscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);
let svgofBottomaxes = d3.select('#Bottomaxiselement').append('svg').attr('width', width).attr('height', height);
let gaxisbottom = svgofBottomaxes.append("g").attr("transform", "translate(50, 20)");
let bottom_axis = d3.axisBottom().scale(Bottomscale);
gaxisbottom.call(bottom_axis);
}

Bottom Axis Output 

Right Axis

rightaxis() {
let width = 400, height = 250;
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];
let leftscale = d3.scaleLinear().domain([0, d3.max(data)])  .range([height/2, 0]);
let svgofleftaxis = d3.select('#Rightaxiselement')  .append('svg')  .attr('width', width)  .attr('height', height);
let gaxisLeft=  svgofleftaxis.append("g");//.attr("transform", "translate(50, 10)");
let left_axis = d3.axisRight().scale(leftscale);
gaxisLeft.call(left_axis);
}

Right Axis Output 

Left Axis

leftaxis(){
let width = 400, height = 250;
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];
let leftscale = d3.scaleLinear().domain([0, d3.max(data)])  .range([height/2, 0]);
let svgofleftaxis = d3.select('#yaxeselement')  .append('svg')  .attr('width', width)  .attr('height', height);
let gaxisLeft=  svgofleftaxis.append("g").attr("transform", "translate(50, 10)");
let left_axis = d3.axisLeft().scale(leftscale);
gaxisLeft.call(left_axis);
}

Left Axis Output 

The XY Axes

bootomleftaxis() {
let width = 400, height = 400;
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];
let bottomscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);
let leftscale = d3.scaleLinear().domain([0, d3.max(data)])  .range([height/2, 0]);
let xAxisTranslate =(height / 2) + 10;
let svgofbottomleft = d3.select('#xyaxeselement').append('svg').attr('width', width).attr('height', 250);
let gyonxy = svgofbottomleft.append("g").attr("transform", "translate(50, 10)");
let gxonxy =svgofbottomleft.append("g").attr("transform", "translate(50, " + xAxisTranslate  +")");
let left_axis = d3.axisLeft().scale(leftscale);
let bottom_axis = d3.axisBottom().scale(bottomscale);
gyonxy.call(left_axis);
gxonxy.call(bottom_axis);
}

Output of XY Axes

Code Action @StackBlitz
Next Lab Walkthrough with  D3 Axes