如何重新格式化轴标签？

Question

我已经开始学习D3了，很多教程都是为v3编写的。我阅读了很多v4的文档，但我无法理解如何格式化我的轴标签。现在我有一个如下所示的可视化：

重叠的月份并不理想。我知道我可以使用d3's timeFormat并使用“％b”来使用缩写月份。但是我不确定它在语法上是如何适应的。我的底轴代码是：

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .ticks(d3.timeMonth.every(4)));

我希望它会像

一样

format = d3.time.format("%b")
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .ticks(format(d3.timeMonth.every(4))));

但这不起作用。我知道这可能很简单，但我没有得到它。

Answer 1

您应该使用tickFormat代替ticks：

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

这是一个演示：

＆＃13;

＆＃13;

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setYear(new Date().getFullYear() + 1)]);

var axis = d3.axisBottom(scale)
  .tickFormat(d3.timeFormat("%b"))
  .ticks(d3.timeMonth);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>

＆＃13;

＆＃13;

＆＃13;

编辑：用于显示年份而不是1月份：

＆＃13;

＆＃13;

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setYear(new Date().getFullYear() + 1)]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d3.timeFormat("%b")(d) === "Jan" ?
      d3.timeFormat("%Y")(d) : d3.timeFormat("%b")(d);
  })
  .ticks(d3.timeMonth);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>

＆＃13;

＆＃13;

＆＃13;