Question

对于使用scaleLinear的值，这可以很好地工作：

X = d3.scale.linear()
    .domain([0, d3.max(Data, function (d) { return d.x })*1.10])

乘以1.10正是我需要的。但是，我还没有弄清楚如何使用基于时间的轴实现相同的目标：

  X= d3.scaleTime()
      .domain(d3.extent(Data, d => d.date))

Answer 1

您可以通过提取时间戳并对其进行数学运算来做到这一点。但是，时间比数字复杂得多。您必须考虑February年的2月，具有30或31天的月份，夏时制等...

正如D3 API所说的那样，我将进一步使用该方法：

...此方法不会将指定的日期四舍五入为间隔。例如，如果日期是今天的下午5:34，则d3.timeDay.offset（date，1）明天将返回下午5:34（即使夏令时改变了！）。

话虽这么说，但是使用D3时间方法更舒服。

解决方案：

您可以使用interval.offSet来实现所需的目标，

返回等于日期加步长间隔的新日期。

要执行此操作，我们首先必须计算您的最小日期和最大日期之间的间隔。

因此，假设我们具有以下时间范围：

const parser = d3.timeParse("%d-%m-%Y");
const dates = ["17-08-2018", "14-11-2018"].map(parser);
const scale = d3.scaleTime()
  .domain(dates);
console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

让我们在结束日期前增加10％的天数（您可以用秒，分钟，小时，年等来做同样的事情）。

首先，我们得到interval.count的天数：

const parser = d3.timeParse("%d-%m-%Y");
const dates = ["17-08-2018", "14-11-2018"].map(parser);
const numberOfDays = d3.timeDay.count(dates[0], dates[1]);
console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

然后，将其乘以10％：

const parser = d3.timeParse("%d-%m-%Y"); 
const percent = 0.1;
const dates = ["17-08-2018", "14-11-2018"].map(parser);
const increase = d3.timeDay.count(dates[0], dates[1]) * percent;
console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

不要介意数字不是整数：它将被限制。

最后，我们使用interval.Offset增加最后日期：

const parser = d3.timeParse("%d-%m-%Y");
const percent = 0.1;
const dates = ["17-08-2018", "14-11-2018"].map(parser);
const increase = d3.timeDay.count(dates[0], dates[1]) * percent;
const scale = d3.scaleTime()
  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);
console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

如何使用d3.scaleTime按比例增加X轴的大小？

1 个答案: