无法将d3轴设置为仅整数

Question

我在这里看了几个答案：

1. how-to-limit-d3-svg-axis-to-integer-labels
2. d3-tick-marks-on-integers-only

但他们不适合我。

我有一些年，例如：

years: Array<number> = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017];
let minXAxis = Math.min(...this.years);
let maxXAxis = Math.max(...this.years);

this.xScale = d3.scaleLinear().range([this.margins.left, this.width - this.margins.right]).domain([minXAxis, maxXAxis]);

this.xAxis = svg.append("g")
  .attr("class", "axis axis-x")
  .attr("transform", `translate(0, ${this.height - this.margins.bottom})`)
  .call(d3.axisBottom(this.xScale));

这样做可以提供以下内容。



然后当我像.tickFormat(d3.format("d"))这样使用时：

this.xAxis = svg.append("g")
  .attr("class", "axis axis-x")
  .attr("transform", `translate(0, ${this.height - this.margins.bottom})`)
  // set to only display ticks for digits
  .call(d3.axisBottom(this.xScale).tickFormat(d3.format("d")));

我得到以下



正如你所看到的，它摆脱了小数，但它仍然列为重复，例如2011年，2011年，......

如何修复此问题，以便x轴仅显示：2010,2011,2012，...？

Answer 1

在该轴上有没有重复：那些似乎的值是相同的，因为你摆脱了小数。

这里的问题很简单：你使用了错误的比例来完成任务。您应该使用时间刻度，或者，如果您希望将这些年份视为定性（分类）变量，则应使用序数比例（如d3.scalePoint）。

请记住，一年不是常规数字：2012是一年，但2012.2412223是什么？如果你使用线性刻度，那么你就像这样处理这些年份：纯数字。

因此，解决方案只是降低线性标度并使用时间标度（或顺序标度）。

但是，如果（无论出于什么原因）你想要坚持使用线性刻度并将数字视为数字（它们不是数字），请使用tickValues来确保只有{{1}中的值数组将显示在轴上：

years

这是一个演示：

d3.axisBottom(this.xScale)
    .tickValues(years)

var years = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017];
var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .domain(d3.extent(years))
  .range([20, 480]);
var axis = d3.axisBottom(scale)
  .tickValues(years)
  .tickFormat(d3.format("d"));
var gX = svg.append("g")
  .attr("transform", "translate(0,50)");
axis(gX);