Javascript d3.js & nvd3.js -- 如何设置y轴范围
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11766879/
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
d3.js & nvd3.js -- How to set y-axis range
提问by Viet
I'm trying to set the y-axis range of the chart from 1-100.
我正在尝试将图表的 y 轴范围设置为 1-100。
Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues
查阅了 API 文档并找到了axis.tickValues 的可能解决方案,如下所示 https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues
However, using the option does not work. Reading further down on the documentation page linked above under axis.tickSize, the following line was spotted
但是,使用该选项不起作用。在axis.tickSize下链接的文档页面上进一步阅读,发现了以下行
The end ticks are determined by the associated scale's domain extent, and are part of the generated path domain rather than a tick line
末端刻度由关联比例的域范围确定,并且是生成的路径域的一部分,而不是刻度线
So I take it setting the min and max of the range can't be done through the Axis option.
所以我认为设置范围的最小值和最大值无法通过 Axis 选项完成。
Any ideas on where I can specify the range?
关于我可以在哪里指定范围的任何想法?
回答by Viet
Found a solution.
找到了解决办法。
Appending .forceY([0,100])
to the instantiation of the chart forces the axis to take on the range specified in the array.
附加.forceY([0,100])
到图表的实例化强制轴采用数组中指定的范围。
From the example here http://nvd3.org/livecode/#codemirrorNav
从这里的例子http://nvd3.org/livecode/#codemirrorNav
Appending .forceY([0,100])
to the chart variable works.
附加.forceY([0,100])
到图表变量有效。
回答by Bob Monteverde
As the name should suggest, this adds the values in the array to your y
domain, it does not set the y domain to [0,100]
. So if you set this to [0,100]
and your data's domain is -10
to 110
, the domain will be [-10,110]
.
顾名思义,这会将数组中的值添加到您的y
域中,它不会将 y 域设置为[0,100]
. 所以,如果你将其设置为[0,100]
您的信息的域名是-10
到110
,该域名将是[-10,110]
。
Now if you wanted the domain to be [0,100]
even if your data is larger you can use chart.yDomain([0,100])
... BUT usually you want your domain to include or your data, so I highly recommend using chart.forceY instead of chart.yDomain
. As you'll see, one of the most common uses for forceY is forceY([0])
to make 0 always in the domain.
现在,如果您希望域[0,100]
即使您的数据更大,您也可以使用chart.yDomain([0,100])
...但通常您希望您的域包含或您的数据,所以我强烈建议使用 chart.forceY 而不是chart.yDomain
. 如您所见, forceY 最常见的用途之一是forceY([0])
使域中始终为 0。
Hope that helps you understand what the function is actually doing, and arboc7, this should explain why it doesn't work in making the range smaller than the data set's.
希望能帮助您了解该函数实际在做什么,而arboc7,这应该可以解释为什么它不能使范围小于数据集的范围。
回答by Pierre-Yves V.
For stacked area charts, .forceY([0,100])
does not work.
Use instead .yDomain([0,100])
对于堆积面积图,.forceY([0,100])
不起作用。改用.yDomain([0,100])
回答by sepans
If you mean setting the y-domain
(the range of numbers that should be displayed) for stacked area charts, this works for me:
如果您的意思是y-domain
为堆积面积图设置(应显示的数字范围),这对我有用:
nv.models.stackedAreaChart()
.x(function(d) {...})
.y(function(d) {...})
.yDomain([0, maxY])
...
回答by Dijo
I have tried like:
我试过像:
chart.forceY([DataMin, DataMax]);
Datamin and Datamax need to calcuate from array. Also inorder to adjust axis points dynamically when filter applies need to custom handle click events of filter like:
Datamin 和 Datamax 需要从数组计算。同样为了在过滤器应用时动态调整轴点需要自定义处理过滤器的点击事件,例如:
$('g.nv-series').click(function() {
//Calculate DataMin, DataMax from the data array
chart.forceY([DataMin, DataMax]);
});
So graph will adjust each time filter applies.
因此,每次应用过滤器时,图表都会进行调整。
回答by myrcutio
I had a similar issue and resolved it by explicitly defining the domain in the yScale of the yAxis, i.e.
我有一个类似的问题,并通过在 yAxis 的 yScale 中显式定义域来解决它,即
var yscale = d3.scale.linear()
.domain([0,100])
.range([250, 0]);
var yAxis = d3.svg.axis()
.scale(yscale);