缩短x轴上的月份

Question

如何从10月到10月缩短月份标签.

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

我想我应该用

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

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

tickFormat如果图例显示一个月,我该如何应用？

Answer 1

这种自定义的问题在于，在 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>

正如您所看到的，我们有四个刻度：三个刻度代表完整的月份，一个刻度代表年份。

this现在让我们使用数据 ( )来检查每个刻度的格式并进行比较d，仅当文本已经是一个月时才将文本转换为缩写的月份名称：

gX.selectAll(".tick").each(function(d) {
  if (this.textContent === d3.timeFormat("%B")(d)) {
    d3.select(this).select("text").text(d3.timeFormat("%b")(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, 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))
  }
})