Добавьте месяц заполнения от минимальной даты

Question

Сначала я хочу динамически обработать диапазон дат для любого типа временного набора данных.Этого я добился, используя:

var earliest = d3.min(data.map(d=>d.date));
var latest = d3.max(data.map(d=>d.date));

Затем я хочу добавить месяц заполнения, чтобы данные не выглядели такими ненадежными, висящими по краям.Поэтому я попытался:

var dateMin = earliest;
var dateMax = latest;

dateMin.setDate(dateMin.getMonth()-30);
dateMax.setDate(dateMax.getMonth()+30);

Кажется, что шкала все еще запоминает начальное значение earliest, даже если я его скопировал.То есть все, что в итоге делалось, было буквально изменить мою точку данных на более раннюю, то есть результат не изменился;он все еще висит на краю.

Вопрос

Есть ли надежный способ, которым я могу использовать для расчета шкалы, чтобы было дополнительно 30 дней заполнения?

Answer 1

Относительно вашей проблемы: earliest и dateMin указывают на один и тот же объект.Изменение одного изменит другое:

var earliest = new Date();
var dateMin = earliest;
dateMin.setDate(dateMin.getMonth() - 30);
console.log(earliest);

Это, конечно, не имеет ничего общего с D3, это функция JavaScript.Тем не менее, D3 предоставляет метод, который не только проще, но и позволяет избежать таких ошибок.

A D3 надежный способ:

Вы должны использовать interval.offset, который:

Возвращает новую дату, равную дате плюс интервалы шага.

Например, добавление 30 дней:

const date = new Date();
const datePlus30Days = d3.timeDay.offset(date, 30);
console.log(datePlus30Days)

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

В качестве альтернативы, удаление 30 дней:

const date = new Date();
const dateMinus30Days = d3.timeDay.offset(date, -30);
console.log(dateMinus30Days)

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

Итак, в вашей шкале используйте:

var dateMin = d3.min(data, function(d){
    return d3.timeDay.offset(d.date, -30);
});

var dateMax = d3.max(data, function(d){
    return d3.timeDay.offset(d.date, 30);
});