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＆＃39;的帮助下，这就是我最终做的工作。指导：

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仅显示第一个和最后一个（因为第一个最终显示在中间，因为第一个显示第一个和第一个数据点显示）

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

1 个答案: