Question

对于可变日期范围，我想实现一个适应x轴，它也可以调整到可用的窗口宽度。我得到了一些工作代码，用于确定范围宽度并更改轴刻度格式功能。它还根据范围宽度调整刻度数。

if (range <= 1000*60*60) {
    axis.ticks(d3.time.minute, step)
        .tickFormat(d3.time.format('%M:%S'));
} else if (range <= 1000*60*60*24) {
    axis.ticks(d3.time.hour, step)
        .tickFormat(d3.time.format('%H:%M'));
} else if (range <= 1000*60*60*24*7) {
    axis.ticks(d3.time.day, step)
        .tickFormat(d3.time.format('%d.%m'));
} else if (range <= 1000*60*60*24*7*30) {
    axis.ticks(d3.time.week, step)
        .tickFormat(d3.time.format('%d.%m'));
} else {
    axis.ticks(d3.time.month, step)
        .tickFormat(d3.time.format('%d.%m.%Y'));
}

step是线性比例的结果：

function getSteps(width) {
    var scale = d3.scale.linear()
        .domain([0, 1200])
        .range([14, 1]);

    return Math.ceil(scale(width));
}

代码确实在某种程度上起作用，但感觉就像一个肮脏的黑客，结果在某种程度上是不可预测的。我将样本放在jsfiddle上，其范围跨越24小时，从当前时间开始。调整jsfiddle结果视图的大小时，您会注意到轴始终显示午夜刻度，而不是均匀分布。

那么，是否有更好/更清洁/更可靠的方法呢？

不同时间范围的响应时间尺度

0 个答案: