无法将 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 确保只有 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);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>