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

Question

当我尝试使用 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);

这是屏幕上显示的内容。

Answer 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"/>

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

How to change the tick value in d3, javascript from "1900" to "January"?

javascript

svg

d3.js

axis