无法将 d3 轴设置为仅整数

Question

我在这里查看了几个答案：

how-to-limit-d3-svg-axis-to-integer-labels
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>

无法将 d3 轴设置为仅整数

Cannot set d3 axis to only integers

axis

axis-labels

d3.js

typescript