javascript NVD3/D3 改变 y 轴最小值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17067595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 06:59:03  来源:igfitidea点击:

NVD3/D3 change y axis minimum value

javascriptd3.jsnvd3.js

提问by Siva

I am currently using NVD3 to make a few line charts. I am wondering if it is possible to make the y axis ticks to always start from 0. Currently it always starts from the lowest y value. I have tried using tickValues but I do not want to change the other values. I have also tried to add a data point with a value of 0, but this seems like a workaround and it affects the way the graph looks. Any ideas?

我目前正在使用 NVD3 制作一些折线图。我想知道是否有可能使 y 轴刻度始终从 0 开始。目前它总是从最低的 y 值开始。我曾尝试使用 tickValues 但我不想更改其他值。我还尝试添加值为 0 的数据点,但这似乎是一种解决方法,它会影响图形的外观。有任何想法吗?

采纳答案by Lars Kotthoff

You don't need to add a "dummy" data point, all you need is adjust the input domain of the scale, e.g. something like

您不需要添加“虚拟”数据点,您只需要调整比例的输入域,例如

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

回答by WolfgangCodes

Most charts have a forceX and forceY functions which take a array of values. You can use it like this:

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

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

Which will ensure that on your xAxis you are always showing at least 0 and 10, but won't restrict the domain if you manipulate it directly. That is if you do something like:

这将确保在您的 xAxis 上始终显示至少 0 和 10,但如果您直接操作它,则不会限制域。也就是说,如果您执行以下操作:

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

and your data has negative X values that won't show on your chart because they'll fall outside of the specified domain, but they will, if you use forceX.

并且您的数据具有负 X 值,这些值不会显示在您的图表上,因为它们会落在指定域之外,但如果您使用 forceX,它们会出现。

回答by Simon_Weaver

I find this test page to be very useful when figuring out properties on nvd3 charts (applicable even if you're not using angular btw)

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

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

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

  • Click 'Extended'
  • Click the +symbol next to forceY
  • Type in a value like -5and then add it to immediately see the effect (the sample graph already has zero shown).
  • 点击“扩展”
  • 单击+旁边的符号forceY
  • 键入一个值-5,然后添加它以立即查看效果(示例图已显示零)。

回答by Nick Vinogradskiy

You can set only min value by chart.forceX(0)

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