d3 - 如何格式化 x 轴上的日期

Question

d3 的超级新手，如果这个问题措辞不好，我深表歉意。

我正在尝试更改预先存在的代码并重新格式化图表 x 轴上显示的日期。目前，我的 x 轴显示每个月的勾号，并且月份没有缩写，例如January、February等。

由于空间限制，我需要缩写这些月份，例如Jan、Feb等。

这是创建 x 轴的代码：

   master.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3axis.axisBottom()
        .scale(x));

我相信我需要将一个函数链接到调用axisBottom。我一直在查看tickFormat文档timeFormat以及这个示例。我正在尝试做类似的事情：

    master.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3axis.axisBottom()
        .tickFormat(d3axis.timeFormat("%m"))
        .scale(x));

但我收到此错误：npmD3Axis.default.timeFormat 不是函数

有人能指出我正确的方向吗？谢谢！

Answer 1

axis.ticks(d3.time.months, 1).tickFormat(d3.time.format("%b"));

您必须将甲酸盐形式更改%m为%b

对于 d3.js v4

axis.ticks(d3.timeMonth, 1).tickFormat(d3.timeFormat('%b'));