如何以特定间隔解析D3上的日期 [英] How to parse date on D3 with a specific interval

问题描述

我正在尝试解决FreeCodeCamp的此挑战.我设法在 Y轴(2000、4000、6000等)上显示了带有正确数据的图表.在 X轴上，我只想显示间隔为5的年份(1990、1995、2000等).

I'm trying to solve this challenge from FreeCodeCamp. I managed to display the chart with the right data on the Y axis (2000, 4000, 6000, etc...). On the X axis I would like to display just the year with an interval of 5 (1990, 1995, 2000, etc...).

但是，我可以在该轴上显示的内容是这样的:Thu Oct 01 1981 00:00:00 GMT+0100 (CET). 这是到目前为止的代码:

However, what I'm able to display on that axis is something like this: Thu Oct 01 1981 00:00:00 GMT+0100 (CET). Here is the code so far:

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

然后，结果如下: 我试图弄清楚如何解析日期，但是如果我更改了代码，则与日期关联的值就会消失.

And, here is the result: I'm trying to figure out how to parse the dates, but if a I change the code the values associated with the dates disappear.

我该怎么办?
谢谢！

What should I do?
Thanks!

更新

通过简单地更改以下代码，我只能在X轴上显示年份:

I was able to display only the years on the X axis, by simply changing this piece of code:

array.forEach(function(d) {
        d[0] = new Date(d[0]).getFullYear();
        d[1] = +d[1];
  });

现在，我想通过增加时间间隔来显示更少的年份.我试图添加这样的刻度线:

Now, I would like to display fewer years by increasing the time interval. I've tried to add ticks like this:

var xAxis = d3.axisBottom()
    .scale(x).ticks(d3.timeInterval(4));

但是它不起作用.我该如何解决?

But it doesn't work. How can I fix it?

推荐答案

我创建了小提琴我认为可以达到预期的效果.我所做的更改是在您的刻度带轴创建上，我将其更新为:

I created a fiddle which I think gives the desired results. The change I did was on your scale band axis creation I updated it to:

var xAxis = d3.axisBottom(x)
    .tickValues(x.domain().filter(function(d, i) {return !(i%4);}));

您可以将i%4更改为任意多个刻度.您也可以这样做，以便如果您愿意的话，它仅返回某些数据点. return d == Feb 2018 在此处中找到

You can change the i%4 to however many ticks you would like. You could also make it so that it returns only certain data points if you wish eg. return d == Feb 2018 More information found here.

这篇关于如何以特定间隔解析D3上的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！