Svg d3.js如何决定要显示的刻度数和刻度？

在我的图表上，我有一个时间刻度xAxis。我希望用户可以做放大、缩小操作，在月视图（显示一个月的节拍）、周视图（显示一周的节拍、周一、周二、周三…）和日视图（显示24小时的节拍）之间切换

当我调用svg上的缩放行为时。我的图表很好地拉伸和压缩。但是X轴上的滴答声正在“逐渐”变化，这不是我想要的。例如，当我以一定的比例放大时，滴答声是[5月3日、5月5日、5月7日……]，滴答声D3随机决定似乎跳过了一天。当用户进一步放大到小时数时，也会发生这种情况

我想要的是：假设用户最初在月视图上（显示一个月的节拍），然后用户继续放大到一定的比例，xAxis的节拍将变为7天（周一、周二、周三……），如果用户继续放大，在一定的比例下，节拍将变为小时。我不希望d3随机决定滴答声

---

如何实现这一点？

对于每个缩放比例，您应该明确设置

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']

。

---

您可以在此处看到此代码的工作方式：

要准确设置所需内容，唯一的方法是将其显式传递给

.tickValues（）

。