Angular 7 D3|D3 Axes| Walkthrough Axes in D3 |D3|D3 Part13

Walk-through with Axes in D3

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.
• D3 Part 12-  Axes in D3.

Walk-through with Axes in D3

Topaxis() 

let width = 400, height = 100;

SVG width and height as variables.

let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];

dataset as an array

let svgoftopaxes = d3.select('#Topaxiselement').append('svg').attr('width', width).attr('height', height);

Create SVG element with defined width and height using d3

var topscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);

Linear Scale created using d3 scaleLinear , d3 min , d3 max

.range([0,width-100]) specifies the range [0,300]. So value 10 will be map to 0 and value 300 will be map to 30.

let gaxistop = svgoftopaxes.append("g").attr("transform", "translate(50, 20)");

group created with transform to (50,20) location

let top_axis = d3.axisTop().scale(topscale);

using d3.axisTop to create a top axis with scale value

gaxistop.call(top_axis);

Append the top_axis to the group element gaxistop using call method.

Code Action @StackBlitz