Как пропорционально увеличить размер оси X, который использует d3.scaleTime?

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

Вы можете сделать это, извлекая временную метку и делая с ней математические операции.Однако время сложнее, чем числа.Вы должны учитывать февраль в високосные годы, месяцы с 30 или 31 днем, летнее время и т. Д. *

Как API D3 говорит о методе, который я буду использовать ниже:

... Этот метод не округляет указанную дату до интервала.Например, если дата сегодня в 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>