如何从10月到10月缩短月份标签.
我想我应该用
.tickFormat(d3.timeFormat("%b"))
但是当我使用它时,这些年没有显示出来.
如果图例显示一个月,我该如何应用tickFormat?
最佳答案
这种自定义的问题在于D3轴是自动生成的,并且设置诸如确切的刻度量之类的东西可能会令人沮丧地困难.这种情况在时间尺度上更加复杂,这使您的情况变得更糟:在时间尺度上,很难事先知道如何格式化刻度线.
如您所知,将所有刻度转换为月份的缩写很容易.但是,如果要保留默认结构并仅更改月份的刻度,则必须在创建轴后修改它.在这个例子中,使用每个.
所以,让我们首先创建一个默认轴.这里是:
var svg = d3.select("svg");
var scale = d3.scaleTime()
.range([20,480])
.domain([new Date("06-01-2016"),new Date("06-01-2017")]);
var axis = d3.axisBottom(scale)
.ticks(4);
var gX = svg.append("g")
.attr("transform","translate(0,50)")
.call(axis);
正如您所看到的,我们有四个刻度:三个刻度与完整月份和一个刻度与年份.
现在让我们使用它来检查每个刻度的格式,并与数据(d)进行比较,只有在已经是一个月的情况下才将文本转换为缩写的月份名称:
gX.selectAll(".tick").each(function(d) {
if (this.textContent === d3.timeFormat("%B")(d)) {
d3.select(this).select("text").text(d3.timeFormat("%b")(d))
}
})
结果如下:
var svg = d3.select("svg");
var scale = d3.scaleTime()
.range([20,50)")
.call(axis);
gX.selectAll(".tick").each(function(d) {
if (this.textContent === d3.timeFormat("%B")(d)) {
d3.select(this).select("text").text(d3.timeFormat("%b")(d))
}
})