javascript - 如何增加 d3 中日期轴的范围？

Question

我在 d3 中有一个折线图。 x 轴是日期。我想稍微增加范围，以便第一个和最后一个数据点不会恰好落在图表上的第一个和最后一个日期。这是图表的图片:

请注意第一个数据点和最后一个数据点如何位于图表的开头和结尾？我想要两边都有一点边距，即最小的日期应该小一点，最大的日期应该大一点。有没有简单的方法来扩展范围？

这是当前创建的方式:

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

编辑:日期是动态的，可能是几天或几十年。我希望得到一个能够查看日期范围并在每一端添加 5% 左右的答案。另请提供一个不依赖于添加另一个库的解决方案，这可能与现有的库函数发生冲突。

例如，Gerardo 下面的解决方案依赖于添加额外的库才能使计数函数正常工作。但这会干扰代码中稍后的轴功能。

让以下代码工作的唯一方法:

  const minDate = new Date("October 10, 2010");
  const maxDate = new Date("January 31, 2020");
  const daysBetween = d3.timeDay.count(minDate,maxDate);

要包含这个库:

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

但这会导致稍后使用的以下代码失败:

  var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(d3.time.years,1)
    .tickSize(10)
    .orient("bottom");

这是我尝试的解决方案。我从范围中获取最小和最大日期，将它们转换为毫秒，然后从最小值中减去 5%，向最大值添加 5%，然后设置新的范围:

  var xSpan = maxTime - minTime;
  console.log("maxTime=" +maxTime +", minTime=" +minTime +", xSpan="+xSpan);
  xMarg = xSpan * 0.05;  
  xMarg = xMarg.toFixed(0); //nearest millisecond
  console.log("xMarg="+xMarg);
  var minDate = new Date(minTime-xMarg);
  var maxDate = new Date(maxTime+xMarg);
  console.log("minDate="+minDate +", maxDate="+maxDate);
  x.domain([minDate,maxDate]);

但是 maxDate 输出显示错误:

maxTime=1580454000000, minTime=1288332000000, xSpan=292122000000 xMarg=14606100000 minDate=Wed May 12 2010 22:45:00 GMT-0600 (Mountain Daylight Time), maxDate=Invalid Date

Answer 1

d3-time模块有一些方便的方法，您可以根据您的情况使用 interval.offset 。您可以选择是否要加/减毫秒、秒、分钟、小时、天、周、月或年。

例如，如果您想在某个日期上添加 15 天，例如今天:

const todayPlus15days = d3.timeDay.offset(new Date(), 15);
//Interval type and offset-----^-----------------------^

console.log("In 15 days, it will be: " + todayPlus15days);

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

就您的情况而言，我们减去/加上 2 个月。为此，我们将 d3.extent 更改为 d3.min/d3.max:

x.domain([d3.timeMonth.offset(d3.min(data, function(d) {
    return d.date;
  }), -2),//subtracting 2 months
  d3.timeMonth.offset(d3.max(data, function(d) {
    return d.date;
  }), 2)//adding 2 months
])

值得一提的是，d3.timeMonth.offset(date, 2) 可能看起来与 d3.timeDay.offset(date, 60) 相同，但是 60 天不一定是2个月。不过，在您的情况下，这种精度并不重要。

<小时/>

编辑

根据your comment ,

All the answers so far assume a know date range. The date range could be a few days or a few decades. I'm hoping for an answer that looks at the date range and adds something like 5% more to each end.

这也很容易实现。首先，我们设置百分比(例如 5%)，然后获取日期间隔。为了获得更高的精度，您可以使用秒甚至毫秒，但我将在这里使用天(d3.timeDay.count)。最后，根据百分比设置偏移量(开始/结束)。

这是一个演示:

const date1 = new Date("March 19, 2019");
const date2 = new Date("December 10, 2019");
const percentage = 0.05;
const numberOfDays = d3.timeDay.count(date1, date2);
const domain = [d3.timeDay.offset(date1, -(~~(numberOfDays * percentage))),
  d3.timeDay.offset(date2, +(~~(numberOfDays * percentage)))
];

console.log(domain)

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