将年份值记录到 xAxis

Question

我有一个SVG元素，它想成为一个折线图。 图表的 xAxis 应显示年份(最好以 1 年为间隔：1980、1981 年等)

我的数据集具有年值，我将其提取到 d3.extent 变量中，该变量重新运行我需要的 2 年值作为我的 xAxis 的范围。

var timeExtent (2) [1980, 2019]

然后我声明 xScale：

let xScale = d3.scaleTime()
.domain(timeExtent)
.range([0, width]);

然后我声明 xAxis：

let x_axis = d3.axisBottom(xScale);

然后我用 xAxis 附加我的 svg 元素：

lineGraph_svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(${margin},${height})`)
.call(x_axis.tickFormat(d3.timeFormat("%Y")))
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-65)")

现在，html中的xAxis仅重复显示1970年。 1970年甚至不在数据集中。

x轴输出

如何在 xAxis 上正确显示我从 1980 年到 2019 年的年份？

Answer 1

这是意料之中的，您将数字传递到需要日期对象的刻度：

const timeExtent = [1980, 2019];
let xScale = d3.scaleTime()
.domain(timeExtent);
console.log(xScale.domain());

<script src="https://d3js.org/d3.v7.min.js"></script>

该数字将在内部传递给new Date，这将不将您的2019年视为2019年，而是自1970年1月1日UTC以来的2019毫秒。

相反，将正确的日期对象传递给刻度：

const timeExtent = [1980, 2019];
const parser = d3.timeParse("%Y");
let xScale = d3.scaleTime()
.domain(timeExtent.map(parser));
console.log(xScale.domain());

<script src="https://d3js.org/d3.v7.min.js"></script>