Estoy trabajando con d3.js y dibujo un gráfico de diagrama de dispersión usando scaleTime para calcular los valores en el eje x y el eje y, pero las escalas no calculan los datos de la manera correcta. ( 1 ) El intervalo de segundos en el eje y debe ser de solo 15 segundos y debe comenzar a las 37:00. ( 2 ) Debe haber un pequeño espacio al principio del eje x y la marca al final del eje x debe tener un valor de 2016.

como se muestra en la imagen de abajo

 retriveData(); async function retriveData() { let response = await fetch( "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json" ); let json = await response.json(); chart(json); } function chart(dataset) { const width = 800, height = 500, padding = 60; let svg = d3 .select("body") .append("svg") .style("width", width) .style("height", height); const parsedDate = d3.timeParse("%Y"); const dates = []; for (let i = 0; i < dataset.length; i++) { dates.push(parsedDate(dataset[i].Year)); } const extentDate = d3.extent(dates); const xScale = d3 .scaleTime() .domain(extentDate) .range([padding, width - padding]); const parsedTime = d3.timeParse("%M:%S"); const minutes = []; for (let i = 0; i < dataset.length; i++) { minutes.push(parsedTime(dataset[i].Time)); } const extentTime = d3.extent(minutes).sort((a, b) => b - a); const yScale = d3 .scaleTime() .domain(extentTime) .range([height - padding, padding]); let format = d3.timeFormat("%M:%S"); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale).tickFormat(format); svg .append("g") .attr("transform", `translate(0,${height - padding})`) .call(xAxis); svg.append("g").attr("transform", `translate(${padding},0)`).call(yAxis); } [solution][1] [1]: https://i.stack.imgur.com/D40dF.png