javascript - D3 - 仅显示轴上的中间和最后一个刻度线

Question

我创建了一个折线图，我只想在其中显示中间刻度线和最后一个刻度线。现在，我使用 .tickFormat 自动生成标签的刻度和数据(如果可能，我更愿意使用此数据，因为它会生成四舍五入的数字)。下面的代码最初有效，但一旦数据发生变化(每周都会发生变化)，我猜刻度线的数量会发生变化，从而导致它显示不同的刻度线。我在 3 个不同的折线图上使用相同的代码(除了它们使用不同的数据集外，它们都相同)，并且每个刻度显示不同。

如果我能计算出该函数生成了多少个刻度线，然后根据它显示哪些刻度线，那将是最好的。不过，我不确定这是否可能。如果没有，有什么方法可以实现这一目标吗？

注意:records 是包含 x 轴值的数组。它的长度始终为 5。

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(0)
    .tickFormat(function(d, i, test) {
        var rounded = (Math.round((d / 1000000) * 10) / 10).toFixed(1);
        return i == records.length + 1 || (rounded == min || rounded == (parseFloat(min) + 0.1)) ? rounded + "M" : "";
    });

谢谢!

Answer 1

因此，在 Lars 的指导下，这就是我最终所做的工作:

var yAxisTicks = records;
yAxisTicks[yAxisTicks.length - 1] = d3.max(records) + 1000;
var yAxis = d3.svg.axis()
  .tickValues(yAxisTicks)
  .scale(y)
  .orient("left")
  .tickSize(0)
  .tickFormat(function(d, i){
    var rounded = (Math.round((d/10000) * 10) / 10).toFixed(1);
    return i == 0 || i == 4 ? rounded + "M": "";
  });

最后，我将一个包含所有 y 轴值的数组传递给 .tickValues，然后使用 .tickFormat 仅显示第一个和最后一个(因为第一个最终显示在中间，因为那是第一个数据点显示的地方)