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提供了一种不仅更容易而且避免了此类错误的方法。

一种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);
});

从最小日期开始增加一个月的填充时间

问题

1 个答案:

一种D3防呆方式：