从零开始d3轴时间刻度

Question

I'm creating a graph that uses a time scale. I'd like the X axis to show times starting from zero, and counting up in intervals of 5 seconds each.

--------------------------------
:00  :05  :10  :15  :20  :25  :30

My data has timestamps, which are coerced to date objects. The scales are based on those timestamps.

(Note: I'm using d3 v4/5).

D3 has a nifty function for displaying time intervals, but the intervals start from the time in the data objects.

I could convert my data so all the times start on zero, but it would create additional problems as I'm lining up multiple datasets along the same timescale. I'm wondering if there is a more elegant way to use one of the tick formatting functions for displaying ticks that are different than the scale or to calculate on the fly to start from zero seconds.

Thanks in advance.

EDIT: Here is a more completed code snippet.

 var videoData = [{ "id": "1", "user_id": "_jlxvt8445494296", "video_id": "test", "time": "2018-09-11 15:39:20", "metric": "4" }, { "id": "2", "user_id": "_jlxvt8445494296", "video_id": "test", "time": "2018-09-11 15:39:26", "metric": "2" }, { "id": "3", "user_id": "_jlxvt8445494296", "video_id": "test", "time": "2018-09-11 15:39:27", "metric": "3" }, { "id": "4", "user_id": "_jlxvt8445494296", "video_id": "test", "time": "2018-09-11 15:39:38", "metric": "1" } ]; var svg = d3.select("svg"), width = 400, height = 200; var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S"); //coerce to d3 timeParse object videoData.forEach(function(d) { d.time = parseTime(d.time); }); var x = d3.scaleTime() .rangeRound([0, width]) .domain(d3.extent(videoData, function(d) { return d.time; })); var y = d3.scaleLinear() .rangeRound([height, 0]) .domain(d3.extent(videoData, function(d) { return d.metric; })); var line = d3.line() .x(function(d) { return x(d.time); }) .y(function(d) { return y(d.metric); }) .curve(d3.curveBasis); svg.append("g") .attr("transform", "translate(10," + height + ")") .call(d3.axisBottom(x).tickFormat(d3.timeFormat(":%S"))); svg.append("path") .datum(videoData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("d", line); 

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg width="420" height="220"></svg> 

Answer 1

You have to do the calculations all relative to the start of the video.

Calculate the time difference in ms relative to the start of the video and convert that ms-time to a date new Date(ms) . You get the ms-time of a Date with datevar.getTime() .

To get past the timezone you have to do all display of the time in UTC.

Below an axis that displays the time from 00:00 to 01:40, the first 100 seconds with every 5 seconds a tick.

 var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");//2018-09-10 21:06:34 var formatSecond = d3.utcFormat(":%S"), formatMinute = d3.utcFormat("%M:%S"); function multiFormat(date) { return (d3.timeMinute(date) < date ? formatSecond : formatMinute)(date); } var width = 500; var height = 100; var g = d3.select("#chart").append("svg").attr("width", width + 40).attr("height", height + 40) .append("g").attr("transform", "translate(20,20)"); var x = d3.scaleUtc() .rangeRound([0, width]) //.domain(d3.extent(data, function(d) { return d.time; })); .domain([new Date(0), new Date(100*1000)]); g.append("g") .attr("transform", "translate(0," + height + ")") //.call(d3.axisBottom(x).ticks(d3.timeSecond.every(5))); .call(d3.axisBottom(x).ticks(d3.utcSecond.every(5)).tickFormat(multiFormat)); 

 <script src='http://d3js.org/d3.v5.min.js' charset='utf-8'></script> <div id="chart"></div>