從零開始d3軸時間刻度

Question

我正在創建一個使用時間刻度的圖形。 我希望X軸顯示從零開始的時間，並以5秒的間隔向上計數。

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

我的數據有時間戳，這些時間戳被強制為日期對象。 比例基於這些時間戳。

（注意：我正在使用d3 v4 / 5）。

D3具有顯示時間間隔的漂亮功能，但是間隔從數據對象中的時間開始。

我可以轉換數據，使所有時間都從零開始，但是當我在同一時間范圍內排列多個數據集時，它將產生其他問題。 我想知道是否有一種更優雅的方法來使用刻度線格式設置功能之一來顯示與刻度不同的刻度線，或者從零秒開始即時計算。

提前致謝。

編輯：這是一個更完整的代碼段。

 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

您必須相對於視頻的開頭進行所有計算。

計算時差ms相對於視頻的開始和MS-時間轉換為日期new Date(ms) 。 您可以使用datevar.getTime()獲得日期的毫秒時間。

要越過時區，您必須以UTC顯示所有時間。

在顯示時間從00:00到01:40的軸下方，這是前100秒，每5秒打一個勾。

 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>