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

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

No comments

Post Top Ad

Post Bottom Ad