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

【问题标题】：D3 - Show only middle and last tick marks on axisD3 - 仅显示轴上的中间和最后一个刻度线
【发布时间】：2015-11-04 00:04:30
【问题描述】：

我创建了一个折线图，我只想显示中间刻度线和最后一个刻度线。现在我使用 .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" : "";
    });

谢谢！

【问题讨论】：

您可能希望.tickValues() 将刻度值设置为明确显示。
这就是我的倾向，但我认为我并不完全理解 .tickValues 的工作原理。我该怎么做呢？我是否设置了要在其中显示的 2 个值？
是的，您将要在参数中显示为列表的刻度值传递。见the documentation。

标签： javascript d3.js

【解决方案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 仅显示第一个和最后一个（因为第一个最终显示在中间，因为这是第一个数据点显示的位置）

【讨论】：