如何在将 .ticks() 应用于我的 x 刻度时解决 d3 js 中的此错误

Question

我提供了一个工作示例和 2 个数据集，一个工作正常，另一个没有显示正确的图表。我在我的 x 轴上使用 .ticks() 函数并遇到了这个问题。我想在 x 轴上显示工作示例中的所有标签。

https://jsfiddle.net/q0yhobs4/

这是小提琴内部代码的一部分。

let correctData={
2004: 226.933,
2005: 222.807,
2006: 221.869,
2007: 223.978,
2008: 218.385,
2009: 217.668,
2010: 216.061,
2011: 214.631,
2012: 214.053,
2013: 213.845,
2014: 206.436,
2015: 209.915,
2016: 214.51,
2017: 220.605,
2018: 222.128,
2019: 223.075
}
let asd = Object.keys(results)
    asd = asd.map(item => parseInt(item))
    x.domain(
      d3.extent(data, function(d) {
        return d.year;
      })
    );

svg
      .append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(asd.length));

Answer 1

我阅读了您的代码，发现 asd 和 results 计数不是 10 而不是 16。我认为问题出在此处。