如何以特定间隔解析D3上的日期
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何以特定间隔解析D3上的日期相关的知识,希望对你有一定的参考价值。
我正在尝试从FreeCodeCamp解决this挑战。我设法在Y轴上显示具有正确数据的图表(2000,4000,6000等...)。在X轴上,我想显示间隔为5的年份(1990年,1995年,2000年等等)。
但是,我能够在该轴上显示的是这样的:Thu Oct 01 1981 00:00:00 GMT+0100 (CET)
。这是迄今为止的代码:
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 1200 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d");
var svg = d3.select("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 jsonUrl = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json(jsonUrl, function(error, data) {
if (error) return console.warn(error);
var array = data.data;
var l = array.length;
var minDate = new Date(array[0][0]);
var maxDate = new Date(array[l-1][0]);
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
var y = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x);
var yAxis = d3.axisLeft()
.scale(y).ticks(10);
array.forEach(function(d) {
d[0] = parseDate(d[0]);
d[1] = +d[1];
});
x.domain(array.map(function(d) { return new Date(d[0]) }));
y.domain([0, d3.max(array, function(d) { return d[1]; })]);
d3.select(".description")
.append("text")
.text(data.description);
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", "-.55em")
.attr("transform", "rotate(-90)" );
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("Value ($)");
svg.selectAll("bar")
.data(array)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d[0]); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return height - y(d[1]); });
});
并且,结果如下:我正在试图弄清楚如何解析日期,但如果我更改了代码,则与日期关联的值将消失。
我该怎么办? 谢谢!
UPDATE
通过简单地更改这段代码,我只能在X轴上显示年份:
array.forEach(function(d) {
d[0] = new Date(d[0]).getFullYear();
d[1] = +d[1];
});
现在,我希望通过增加时间间隔来显示更少的年份。我试过添加这样的刻度:
var xAxis = d3.axisBottom()
.scale(x).ticks(d3.timeInterval(4));
但它不起作用。我该如何解决?
答案
我创造了一个fiddle,我认为它给出了预期的结果。我做的更改是在您的比例带轴创建我更新为:
var xAxis = d3.axisBottom(x)
.tickValues(x.domain().filter(function(d, i) {return !(i%4);}));
您可以将i%4
更改为您想要的多个刻度。如果您愿意,也可以使它只返回某些数据点。 return d == Feb 2018
更多资料找到了here。
以上是关于如何以特定间隔解析D3上的日期的主要内容,如果未能解决你的问题,请参考以下文章