如何强制 nvd3 显示与 graph-nvd3 上绘制的值相同的刻度数

Question

如何强制 nvd3 图形显示一定数量的刻度，例如，请在下面找到绘制的图形图像：

如下所示，我将 7 个值推送到包含一周 7 天的数组。但是看起来它们的刻度数比实际值多。我正在寻找与此类似的东西：http://nvd3.org/examples/line.html 然而，当我将鼠标悬停在这些刻度上时，它们未对齐，如图所示：

那是图表线应该在的地方，那是悬停的刻度线显示 tooltip.but 的地方，出于某种原因，我没有显示 7 个刻度线，而是显示 10 个刻度线，所有悬停的工具提示都得到 misaligned.I还试图强制 nvd3 具有特定的滴答数，但没有用。

                chart2.xAxis
                .ticks(7)
                .tickFormat(function(d) {
                    return d3.time.format.utc('%b %d')(new Date(d));
                });

这里是 fiddle：http://jsfiddle.net/86hr7h1s/4/ 理想情况下，我应该在图表上显示 7 天和 7 个刻度，而不是在图表上显示重复的天数和 10 个刻度。有什么错误的想法以及如何纠正这个问题吗？

编辑::::::

我使用 tickValues() 而不是 ticks()，用下面的答案解决了我的问题 7 天。但是，对于较大的值，比如显示 2 个月的图形数据，我将有 30 个数据点。我仍然看到我的图表在悬停时不对齐：

如您所见，悬停点仍未与垂直刻度对齐。我不想在图表上强制 ticksValues 超过 7 天。知道如何实现吗？

仅供参考：我用它让 nvd3 显示 7 个值：

    var datas = this.graphFunction(data);
    chart2.xAxis.tickValues(datas[0].xAxisTickValues);

http://jsfiddle.net/86hr7h1s/5/

谢谢！

Answer 1

如果你想精确控制刻度，你应该使用 .tickValues() 而不是 ticks()。

API Doc

Answer 2

我知道很久以前就有人问过这个问题，但我最近遇到了同样的问题并找到了一个很好的解决方案。

x 轴上刻度不准确的问题的原因是我们要在 x 轴上显示的日期的内部数字表示不准确。正如我们在这里看到的 https://nvd3.org/examples/line.html 当 x 轴上的值为数字时，所有刻度都会准确显示。当我们想在 x 轴上显示日期时，我们还需要将日期转换为某种数字表示形式。通常日期通过 Date.prototype.getTime() 函数转换为数字表示，然后使用如下代码格式化标签 chart.xAxis.tickFormat(d3.time.format('%b %Y')(date)) 但是 getTime() 函数为我们提供的准确性在大多数情况下是多余的。假设我们只想在 x 轴上显示月份和年份，并且有一个排序的日期列表，其中不同的项目总是有不同的日期，但具有特定月份的项目可能有任何日期和时间。因此，可能会出现这样一种情况，即两个相邻的列表项尽管月份不同但彼此非常接近（例如，“2 月 28 日”和“3 月 1 日”）。当我们使用 getTime() 函数将这些列表项转换为数字表示时，生成的大数字列表会记住相邻列表项之间的距离。由于 NVD3 图表中相邻图表点之间的距离始终相等，NVD3 尝试微调标签显示以提供一些数字彼此接近但其他数字不接近的信息。它会导致标签显示不准确，如果图表的点数很少，甚至会导致标签重复。

解决方法是在将日期转换为数字时，省略有关日期和时间的冗余信息。我只需要在 x 轴上显示月份和年份，这段代码对我来说非常有用。

function getChartData(data) {
  var values = data.map(function(val) {
    return {
        x: val.x.getUTCFullYear() * 12 + val.x.getUTCMonth(),
        y: val.y
      }
  });

  return [{
    values: values,
    key: 'date'
  }];
}

function formatDate(numericValue) {
  var year = Math.floor(numericValue / 12);
  var month = numericValue % 12;
  return shortMonthNames[month] + ' ' + year;
}
    
nv.addGraph(function() {
  var data = [
   ...
    {
      x: new Date(2020, 2, 15, 15, 12),
      y: 90
    },
    {
      x: new Date(2020, 3, 3, 3, 54),
      y: 50
    },
    ...
  ];
  
  var chart2 = nv.models.lineChart()
  .showXAxis(true)
  .showYAxis(true);
  
  chart2.xAxis.tickFormat(formatDate);
  
  d3.select('svg#svg')
  .datum(getChartData(data))
  .call(chart2);
  
  return chart2;
});

这里我们不使用.tickValues() NVD3函数，所以不干扰默认渲染引擎，所以NVD3 lib可以在视口宽度改变时自动添加或删除轴标签，并且刻度和相应的垂直线准确显示在它们应该出现的位置。

这是完整的工作示例 http://jsfiddle.net/AlexLukin/0ra43td5/48/

如何强制 nvd3 显示与 graph-nvd3 上绘制的值相同的刻度数

How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3

javascript

d3.js

nvd3.js