如何在创建x轴时强制d3js花费数小时的时间？

小提琴： http ： //jsfiddle.net/8eba8q33/2/

我的x轴是时间刻度

var x = d3.time.scale().range([0, width]); 

在x轴上，如果我的json数据中有10个值，我希望能够正好有10个刻度。 我的json数组包含以下对象：

 CurrentQuantity: 20 LastUpdated: Thu Jan 15 2015 13:09:30 GMT+0100 (Romance Standard Time) 

当我想为x轴创建一个域我试图这样做：

 x.domain(d3.extent(data, function(d) { return d.LastUpdated; })); 

但由于某些原因上面的代码不需要花费几分钟和几秒钟，所以如果我有多个对象，其中LastUpdated是相同的，但差异是在小时或分钟，规模将不会显示它，因为情节最终在顶部彼此的。

我如何强制xAxis考虑小时，分钟和秒？

Answer 1

 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); }) .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; } 

  Chart1 
 
 Chart2