Question

在我的图表上，我有一个时间刻度xAxis。我希望用户可以放大，缩小操作以在月视图（显示一个月的刻度），周视图（显示一周的星期一，星期一，星期二，星期三......），日视图（24的显示滴答）之间切换小时）。

当我在svg上调用缩放行为时。我的图表很好地伸展和凝聚。但是，xAxis上的滴答声正在逐渐改变＆＃34;这不是我想要的。例如。当我以一定比例放大时，嘀嗒声是[5月3日，5月5日，5月7日......]，嘀嗒声D3随机决定似乎跳过了一天。当用户进一步缩放到数小时时也会发生这种情况。

我想要的是：假设用户最初在月视图上（显示一个月的刻度），然后用户继续放大到一定比例，xAxis的刻度将变为7天（星期一，星期二），周三......），如果用户继续放大，在一定比例下，刻度变成小时。我不想让d3随机决定蜱虫。

我怎样才能做到这一点？

Answer 1

对于每个缩放比例，您应明确设置axis.ticks()和axis.tickFormat() 发生缩放事件时，您可以调用以下内容：

adjustTimeAxis: function() {
    switch(this.getZoomState()) {
        case 'longDays':
            this.axis
                .ticks(d3.time.days, 1)
                .tickFormat(function(d) { return d3.time.format('%a %e')(d); })
                .tickSubdivide(false);
            break;
        case 'shortDays':
            this.axis
                .ticks(d3.time.days, 1)
                .tickFormat(function(d) { return d3.time.format('%e')(d); })
                .tickSubdivide(false);
            break;
        case 'weeks':
            this.axis
                .ticks(d3.time.mondays, 1)
                .tickFormat(null)
                .tickSubdivide(6);
            break;
        default: // months
            this.axis
                .ticks(d3.time.months, 1)
                .tickFormat(null)
                .tickSubdivide(1);
    }
} // adjustTimeAxis

在此代码中，函数this.getZoomState会根据缩放比例返回其中一个字符串值['longDays', 'shortDays', 'weeks'] 您可以在此处查看此代码的工作原理：http://bl.ocks.org/oluckyman/6199145

d3.js如何决定显示多少和哪个刻度？

1 个答案: