0
169
Viewsrepeated y axis values with tickFormat d3
I'm getting repeated y-axis values with tickFormat d3.format('.1s'), it is like the actual number are different, like it'll be an array of [6045678, 6223456, 6076887], but when u format the numbers you'll get 6M 3 times,
what is the best solution for this problem, is there any d3 functions for this issue or do we have to create an array of values.
let yAxisValues = [6045678, 6223456, 6076887];
const yScale = d3.scaleLinear()
.domain([d3.min(yAxisValues), d3.max(yAxisValues)])
.range([height, 0])
.nice();
let yAxis = d3.axisLeft(yScale)
.tickPadding(7)
.ticks(5)
.tickFormat(d3.format(".1s"))
·
Juan Pablo Isaza
1 answers
Answer question0
Try changing the precision number from 1 to 2/3/4 & so on in d3.format(".1s") to get what is suitable for you.
let yAxisValues = [6045678, 6223456, 6076887];
let formatter = d3.format(".1s");
let formatter2 = d3.format(".2s");
let formatter3 = d3.format(".3s");
let formatter4 = d3.format(".4s");
yAxisValues.forEach((d) => console.log(formatter(d)));
yAxisValues.forEach((d) => console.log(formatter2(d)));
yAxisValues.forEach((d) => console.log(formatter3(d)));
yAxisValues.forEach((d) => console.log(formatter4(d)));
The above code outputs as below. 6M 3 times is what you are getting, the rest is after changing the precision.
·
Juan Pablo Isaza
Report
Answer question