缩短x轴上的月份

时间:2017-12-15 09:03:58

标签: javascript d3.js

如何缩短10月到10月的月份标签。

当默认图表显示十月时,它应显示十月,并且应保留年份。

我想我应该使用

.tickFormat(d3.timeFormat("%b"))

但是当我使用它时,这些年份都没有显示出来。

如果图例显示月份,我该如何应用tickFormat

1 个答案:

答案 0 :(得分:3)

这种自定义的问题在于D3轴是自动生成的,并且设置一些像精确的刻度量这样的事情可能会令人沮丧。这种情况在时间尺度上更加复杂,这使您的情况变得更糟:在时间尺度上,事先很难知道如何格式化刻度线。

如您所知,将所有标记转换为月份缩写很容易。但是,如果要保留默认结构并仅更改月份的刻度,则必须在创建之后修改轴。在此示例中,使用each

所以,让我们首先创建一个默认轴。这是:



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);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>
&#13;
&#13;
&#13;

正如您所看到的,我们有四个刻度:三个刻度,全月和一个刻度。

现在让我们使用this检查每个标记的格式并与基准(d)进行比较,只有在已经是一个月的情况下才将文本转换为缩写的月份名称:< / p>

gX.selectAll(".tick").each(function(d) {
  if (this.textContent === d3.timeFormat("%B")(d)) {
    d3.select(this).select("text").text(d3.timeFormat("%b")(d))
  }
})

结果如下:

&#13;
&#13;
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);

gX.selectAll(".tick").each(function(d) {
  if (this.textContent === d3.timeFormat("%B")(d)) {
    d3.select(this).select("text").text(d3.timeFormat("%b")(d))
  }
})
&#13;
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>
&#13;
&#13;
&#13;