Tell us what’s happening:
Is anyone can help to instruct how to change the x and y axis labels?
The freeCodeCamp course did not covered these methods and I found only some difficult explanations.
The full code available here:
Now the yAxis is in float Number format. I would like to change Min:Sec format.
Also the xAxis include an ugly dot. I would like to remove it.
And one more question: how to use the data-any attribute? And where we have to use it in this project? I resolve the challenge without using data-attributes…
Thanks for your help
Csaba
Your code so far
// Create scale:
const xScale = d3.scaleLinear()
.domain([minYear - 1, maxYear + 1])
.range([padding, width - padding]);
const yScale = d3.scaleLinear()
.domain([minSecond, maxSecond])
.range([height - padding, padding]);
// Create SVG:
const svg = d3.select("#myChart")
.append("svg")
.attr("width", width)
.attr("height", height);
// Create axis:
const xAxis = d3.axisBottom(xScale);
svg.append("g")
.attr("transform", `translate(0, ${height - padding})`)
.attr("id", "x-axis")
.call(xAxis);
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", `translate(${padding}, 0)`)
.attr("id", "y-axis")
.call(yAxis);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36 OPR/60.0.3255.170.
Link to the challenge: