如何将 d3、javascript 中的刻度值从“1900”更改为“January”？

【问题标题】：How to change the tick value in d3, javascript from "1900" to "January"?如何将 d3、javascript 中的刻度值从“1900”更改为“January”？
【发布时间】：2021-04-16 08:46:42
【问题描述】：

当我尝试使用 d3 中的 scaleTime 创建 y 轴时，我发现应该是第一个月的刻度，“January”实际上显示了该特定年份的名称。如何让它显示月份而不是年份的名称？

这是我生成 y 轴的代码。

var yScale = d3.scaleTime().domain([new Date(0, -1, 10), new Date(0, 12)]).range([0, 600]);
var yAxis = d3.axisLeft(yScale).ticks(14);
g.append("g").call(yAxis);

这是屏幕上显示的内容。

【问题讨论】：

标签： javascript svg d3.js axis

【解决方案1】：

使用tickFormat：

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

const yScale = d3.scaleTime().domain([new Date(0, -1, 10), new Date(0, 12)]).range([0, 600]);
const yAxis = d3
  .axisLeft(yScale)
  .ticks(14)
  .tickFormat(d => monthNames[d.getMonth()])
d3.select('svg').append("g")
  .attr('transform', 'translate(100, 20)')
  .call(yAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200" height="1000"/>

【讨论】：