NVD3/D3改变y轴最小值

NVD3/D3 change y axis minimum value

本文关键字：最小值 改变 D3 NVD3      更新时间：2023-09-26

我目前正在使用NVD3制作一些折线图。我想知道是否有可能使y轴始终从0开始。目前它总是从最低的y值开始。我已经尝试使用tickValues，但我不想改变其他值。我还尝试添加一个值为0的数据点，但这似乎是一种变通方法，它会影响图形的外观。什么好主意吗?

大多数图表都有一个forceX和forceY函数，它们接受一个值数组。你可以这样使用:

  var chart = nv.models.lineChart();
  chart.forceX([0, 10])
  chart.forceY([-1, 1])

这将确保在你的xAxis上你总是显示至少0和10，但如果你直接操作它不会限制域。也就是说，如果你这样做:

chart.yAxis.scale().domain([0, maxValue]);

和你的数据有负的X值，不会显示在你的图表上，因为他们会落在指定的域之外，但他们会，如果你使用forceX。

你不需要添加一个"虚拟"数据点，你所需要的只是调整比例的输入域，例如像

chart.yAxis.scale().domain([0, maxValue]);

我发现这个测试页面在计算nvd3图表属性时非常有用(即使你不使用angular btw也适用)

https://krispo.github.io/angular-nvd3//lineChart

  • 点击"扩展"
  • 点击forceY
    • 旁边的+符号
  • 输入一个值，如-5，然后添加它，立即看到效果(样本图已经有零显示)。

只能通过chart.forceX(0)设置最小值

相关文章：