d3.js-如何在D3js中為時間刻度在X軸上滴答滴答？

Question

這是我根據先前的問題得到的一個問題，可以在這里找到： 鏈接

在鏈接中有一個小提琴，現在我意識到如果我有3個日期：

12.12.12 12:12:12 // 2012年12月12日

12.12.12 11:12:12

12.12.12 10:12:12

日期相同，但相差僅1小時，則該相差未顯示在圖表上。

我只想在x軸上顯示那些日期和小時，它們實際上是數據的一部分，並進行某些處理，因此如果在同一日期發生某些事情，那么實際上就可以在圖形上看到1小時的差異，因此繪圖不會在彼此的頂部。

能以任何方式完成嗎？

Answer 1

創建x軸時，您可以使用

.ticks(d3.time.hour, 1)

每隔1小時就會打一個勾。 有關更多信息，請參見scale.ticks（）的文檔。

這是工作代碼

 exp1(); function exp1(){ var data = [ { "CurrentQuantity": "50", "LastUpdated": "/Date(1420793427983)/" }, { "CurrentQuantity": "76", "LastUpdated": "/Date(1420721731353)/" }, { "CurrentQuantity": "20", "LastUpdated": "/Date(1420714881920)/" }, { "CurrentQuantity": "24", "LastUpdated": "/Date(1420713917820)/" }//, // { // "CurrentQuantity": "25", // "LastUpdated": "/Date(1418907098197)/" // } ]; var margin = {top: 20, right: 20, bottom: 85, left: 50}, width = 1500 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S"); var x = d3.time.scale().range([0, width]); x.tickFormat("%Y-%m-%d %I:%M:%S") var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .tickFormat(function(d) { return formatDate(d); }) .ticks(d3.time.hour, 1) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); data.forEach(function(d) { var date = new Date(parseInt(d.LastUpdated.substr(6))); console.log(date) d.LastUpdated = date; }); var line = d3.svg.line() .x(function(d) { return x( d.LastUpdated); }) .y(function(d) { return y(d.CurrentQuantity); }); var svg = d3.select("#chart1").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); x.domain(d3.extent(data, function(d) { return d.LastUpdated; })); y.domain(d3.extent(data, function(d) { return d.CurrentQuantity; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "rotate(-45)" }); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text('@Resource.Amount'); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); } exp2(); function exp2(){ var data = [ { "CurrentQuantity": "50", "LastUpdated": "/Date(1420793427983)/" }, { "CurrentQuantity": "76", "LastUpdated": "/Date(1420721731353)/" }, { "CurrentQuantity": "20", "LastUpdated": "/Date(1420714881920)/" }, { "CurrentQuantity": "24", "LastUpdated": "/Date(1420713917820)/" }, { "CurrentQuantity": "25", "LastUpdated": "/Date(1418907098197)/" } ]; var margin = {top: 20, right: 20, bottom: 85, left: 50}, width = 1500 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S"); var x = d3.time.scale().range([0, width]); x.tickFormat("%Y-%m-%d %I:%M:%S") var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .tickFormat(function(d) { return formatDate(d); }) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); data.forEach(function(d) { var date = new Date(parseInt(d.LastUpdated.substr(6))); console.log(date) d.LastUpdated = date; }); var line = d3.svg.line() .x(function(d) { return x( d.LastUpdated); }) .y(function(d) { return y(d.CurrentQuantity); }); var svg = d3.select("#chart2").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); x.domain(d3.extent(data, function(d) { return d.LastUpdated; })); y.domain(d3.extent(data, function(d) { return d.CurrentQuantity; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "rotate(-45)" }); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text('@Resource.Amount'); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); } 

  chart { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { /*display: none;*/ } .line { stroke: rgb(142, 188, 0); stroke-width: 2px; stroke-linecap: square; stroke-linejoin: round; fill-opacity: 1; stroke-opacity: 1; fill: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <strong>Chart1</strong> <div id="chart1"></div> <br> <strong>Chart2</strong> <div id="chart2"></div>