d3.js&nvd3.js – 如何设置y轴范围
我试图从1-100设置图表的y轴范围。
查阅了API文档,并find了axis.tickValues的一个可能的解决scheme,如下所示https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues
但是,使用该选项不起作用。 在axis.tickSize下方链接的文档页面上进一步阅读下面一行
结束刻度由关联的刻度的域范围确定,并且是生成的path域的一部分,而不是刻度线
所以我把它设置的范围的最小值和最大值不能通过轴选项来完成。
任何想法,我可以指定范围?
find了解决办法。
将.forceY([0,100])
附加到图表的实例会强制轴取得数组中指定的范围。
从这里的例子http://nvd3.org/livecode/#codemirrorNav
将.forceY([0,100])
附加到图表variables的作品。
正如名字所示,这将数组中的值添加到您的y
域,它不会将y域设置为[0,100]
。 因此,如果您将此设置为[0,100]
并且您的数据的域为-10
到110
,则该域将为[-10,110]
。
现在,如果您希望域名[0,100]
即使数据较大,也可以使用chart.yDomain([0,100])
…但通常您希望您的域名包含数据,因此我强烈build议使用图表。 forceY而不是chart.yDomain
。 正如你将会看到的,forceY最常见的用法之一是forceY([0])
使0总是在域中。
希望能帮助你理解这个函数实际上在做什么,以及arboc7,这应该解释为什么它不能使范围小于数据集的范围。
对于堆积区域图, .forceY([0,100])
不起作用。 改用.yDomain([0,100])
如果你的意思是设置堆积面积图的y-domain
(应该显示的数字范围),这对我有用:
nv.models.stackedAreaChart() .x(function(d) {...}) .y(function(d) {...}) .yDomain([0, maxY]) ...
我曾尝试过
chart.forceY([DataMin, DataMax]);
Datamin和Datamax需要从数组中计算。 另外为了在filter应用时dynamic调整轴点需要定制处理filter的点击事件,如:
$('g.nv-series').click(function() { //Calculate DataMin, DataMax from the data array chart.forceY([DataMin, DataMax]); });
所以图表会调整每次filter适用。
我有一个类似的问题,并通过在yAxis的yScale中明确定义域来解决它
var yscale = d3.scale.linear() .domain([0,100]) .range([250, 0]); var yAxis = d3.svg.axis() .scale(yscale);