d3.js y 轴未正确显示月份

Question

我只是想创建一个标记为从一月到十二月的 y 轴，但我不明白为什么我的代码会创建：一月、三月、三月，四月....十二月。谁能给我解释一下吗？谢谢！

const w = 1078;
const h = 666;
const padding = 70;

const svg = d3
  .select("#svg-container")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

const months = Array(12)
  .fill(0)
  .map((v, i) => new Date().setMonth(i));

const yScale = d3
  .scaleTime()
  .domain([months[11], months[0]])
  .range([h - padding, padding]);

const yAxis = d3
  .axisLeft(yScale)
  .tickValues(months)
  .tickFormat(d3.timeFormat("%B"));

svg
  .append("g")
  .attr("transform", "translate(" + padding + ", -20)")
  .attr("id", "y-axis")
  .call(yAxis);

body {
  background: gray;
}

svg {
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>

Answer 1

发生这种情况是因为 setMonth() 还设置了您当前所在的日期。今天是第 30 天，而 2021 年 2 月只有 28 天，因此不存在的 2021 年 2 月 30 日实际上是 2021 年 3 月 2 日。您如果您以不同的格式打印日期，可以看到这一点：

要解决此问题，您可以使用完整的日期函数 new Date(2021, i, 1)

const w = 1078;
const h = 666;
const padding = 70;

const svg = d3
  .select("#svg-container")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

const months = Array(12)
  .fill(0)
  .map((v, i) => new Date(2021, i, 1));

const yScale = d3
  .scaleTime()
  .domain([months[11], months[0]])
  .range([h - padding, padding]);

const yAxis = d3
  .axisLeft(yScale)
  .tickValues(months)
  .tickFormat(d3.timeFormat("%B %d"));

svg
  .append("g")
  .attr("transform", "translate(" + padding + ", -20)")
  .attr("id", "y-axis")
  .call(yAxis);

body {
  background: gray;
}

svg {
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>

感谢你在 30 号发布这个，否则会有一个隐藏的错误等待出现！

其他资源

MBostock月轴示例：https://bl.ocks.org/mbostock/1849162

D3 Scaletime 文档：https://observablehq.com/@d3/d3-scaletime

d3.js y 轴未正确显示月份

d3.js y-axis not displaying months correctly

d3.js

其他资源