D3 x軸刻度格式和刻度值問題

Question

我正在嘗試為X軸設置日期時間刻度，但是我無法實現我想要的功能。

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var z = d3.scale.category20c(); var svg = d3.select("body").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 + ")"); var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ"); var data = [{ data: [ ["2016-01-28T15:45:26Z", 5.0], ["2016-01-30T15:45:26Z", 0.0], ["2016-02-01T15:45:26Z", 0.0], ["2016-02-03T15:45:26Z", 0.0], ["2016-02-05T15:45:26Z", 0.0], ["2016-02-07T15:45:26Z", 0.0], ["2016-02-09T15:45:26Z", 0.0], ["2016-02-11T15:45:26Z", 0], ["2016-02-13T15:45:26Z", 0], ["2016-02-15T15:45:26Z", 0], ["2016-02-17T15:45:26Z", 0], ["2016-02-19T15:45:26Z", 0], ["2016-02-21T15:45:26Z", 0], ["2016-02-23T15:45:26Z", 0], ["2016-02-25T15:45:26Z", 0] ], label: "a" }] var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .interpolate("monotone") .x(function(d) { return x(parseDate.parse(d[0])); }) .y(function(d) { return y(d[1]); }); var ary = []; data.forEach(function(d) { ary.push(d.data); }); x.domain(d3.extent(d3.merge(ary), function(d) { return parseDate.parse(d[0]); })); y.domain([ d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[1]; }); }), d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[1]; }); }) ]); function calc(val) { var day = Math.floor((new Date() - val) / (24 * 60 * 60 * 1000)); if (day === 0) { return 'today'; } else { return '-' + day + 'D'; } } xAxis.tickFormat(function(d) { console.log("========="); console.log(d); console.log("========="); return calc(d); }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); var series = svg.selectAll(".series") .data(data) .enter().append("g") .attr("class", "series"); series.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.data); }) .style("stroke", function(d, i) { return z(i); }); 

 text.inner-circle { font-weight: 400; font-size: 12px; text-transform: uppercase; } text.inner-text { font-weight: 400; font-size: 36px; font-family: 'Metric Regular', 'Metric'; text-align: center; font-style: normal; text-transform: uppercase; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 2; shape-rendering: crispEdges; } .grid .tick { stroke: lightgrey; stroke-opacity: 0.7; shape-rendering: crispEdges; } .grid path { stroke-width: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

當我打印x.domain() ，我的輸出為[Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time), Thu Feb 25 2016 15:45:26 GMT+0530 (India Standard Time)]是根據正確時間的數據正確的最小值和最大值。

但是，當下面提到的代碼片段運行時，它不會開始傳遞從Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time)開始的值，而不是從Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time) Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time)開始傳遞值Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time) -

xAxis.tickFormat(function(d) {
console.log("=========");
console.log(d);
console.log("=========");
return calc(d);
});

因此，當上面的代碼段運行時，它為我提供了d這些值：Console Output

=========
Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sun Jan 31 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Mon Feb 01 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Wed Feb 03 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Fri Feb 05 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sun Feb 07 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Tue Feb 09 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Thu Feb 11 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sat Feb 13 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Mon Feb 15 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Wed Feb 17 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Fri Feb 19 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sun Feb 21 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Tue Feb 23 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Thu Feb 25 2016 00:00:00 GMT+0530 (India Standard Time)
=========

但是我希望代碼傳遞輸入中提到的日期時間值而不更改它們。

請幫我。

Answer 1

axis的標准行為是使用帶有良好舍入值的規則間隔刻度。

因為您確切地知道要在哪里打勾； 然后axis.tickValues([values])是您的朋友。 從數據中提取日期時間列表，然后通過此函數將其提供給xAxis 。

編輯：要獲取值的數組，以下幾行應該可以完成工作

myTickValues = ary[0].map(function(d){return parseDate.parse(d[0])})
xAxis.tickValues(myTickValues);