d3.js&nvd3.js——如何设置y轴范围

d3.js & nvd3.js -- How to set y-axis range

本文关键字：js 设置 范围 amp nvd3 d3 何设置      更新时间：2023-09-26

我正在尝试将图表的y轴范围设置为1-100。

查阅了API文件，找到了一个具有axis.tickV值的可能解决方案，如下所示https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

但是，使用该选项不起作用。在上面axis.tickSize下链接的文档页面上进一步阅读，发现了以下行

结束刻度由相关联的刻度的域范围来确定，并且是生成的路径域的一部分，而不是刻度线

所以我认为设置范围的最小值和最大值不能通过"轴"选项完成。

关于在哪里可以指定范围，有什么想法吗？

找到了一个解决方案。

将.forceY([0,100])附加到图表的实例化会强制轴采用数组中指定的范围。

从这里的例子来看http://nvd3.org/livecode/#codemirrorNav

将.forceY([0,100])附加到图表变量中是有效的。

顾名思义，这会将数组中的值添加到y域，而不会将y域设置为[0,100]。因此，如果将其设置为[0,100]，并且数据的域为-10到110，则域将为[-10,110]。

现在，如果你希望域是[0,100]，即使你的数据更大，你也可以使用chart.yDomain([0,100])。。。但通常你希望你的域包含或你的数据，所以我强烈建议使用chart.forceY而不是chart.yDomain。正如您将看到的，forceY最常见的用途之一是forceY([0])，使0始终在域中。

希望这能帮助你理解这个函数实际上在做什么，而arbox7，这应该解释为什么它不能使范围小于数据集的范围。

对于堆叠面积图，.forceY([0,100])不起作用。改为使用.yDomain([0,100])

如果你的意思是为堆叠区域图设置y-domain（应该显示的数字范围），这对我来说很有用：

nv.models.stackedAreaChart()
  .x(function(d) {...})
  .y(function(d) {...})
  .yDomain([0, maxY])
...

我遇到了类似的问题，并通过在yAxis的yScale中显式定义域（即）来解决它

var yscale = d3.scale.linear()
                     .domain([0,100])
                     .range([250, 0]);
var yAxis = d3.svg.axis()
                  .scale(yscale);

我试过像：

chart.forceY([DataMin, DataMax]);

Datamin和Datamax需要根据数组进行计算。此外，为了在过滤器应用时动态调整轴点，需要自定义处理过滤器的点击事件，如：

$('g.nv-series').click(function() {
   //Calculate DataMin, DataMax from the data array                    
   chart.forceY([DataMin, DataMax]);                        
});

因此，每次应用过滤器时，图形都会进行调整。

相关文章：