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
NVD3/D3 change y axis minimum value
提问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 toforceY
- Type in a value like
-5
and 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) 设置最小值