我正在尝试创建一个轴功能,刻度/标签是动态的,这意味着它们会自动隐藏/显示.但最重要的是,我希望在一些缩放级别停止渲染更多的刻度/标签.这是一个例子:首先,轴显示年份,然后当您放大时,刻度变为月份,当您进一步放大时,它会显示天数(IE,12月28日).除了我想限制d3,这样当缩放时间超过几个月时,它不再渲染任何蜱,因为月份是我想要的最小单位.
我有几个例子,如果合并将是我想要的,但我无法弄清楚如何做到这一点.
另外:我添加了.tickFormat,因为我想显示每个tick都有一个缩写的月份格式.
示例1:http: //jsfiddle.net/GGYKL/
var xAxis = d3.svg.axis().scale(x)
.tickFormat(d3.time.format('%b'))
.orient("bottom");
Run Code Online (Sandbox Code Playgroud)
此示例显示了在放大时刻度/标签如何正确显示和消失,但是当您继续放大时,它会分割月份并开始重复月份刻度/标签,我不想限制用户放大.
示例2:http: //jsfiddle.net/4kz7t/
var xAxis = d3.svg.axis().scale(x)
.ticks(d3.time.months)
.tickFormat(d3.time.format('%b'))
.orient("bottom"),
Run Code Online (Sandbox Code Playgroud)
此示例解决了当您继续放大时的问题,就像我们在示例1中看到的那样,但是在缩放时它不会动态隐藏/显示刻度/标签.