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

Posted 2023-02-22

【中文标题】d3.js & nvd3.js -- 如何设置 y 轴范围

【英文标题】：d3.js & nvd3.js -- How to set y-axis range

【发布时间】：2012-07-30 19:11:31

【问题描述】：

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

查阅了 API 文档并找到了一个可能的解决方案，如此处所示 https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

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

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

所以我认为设置范围的最小值和最大值无法通过 Axis 选项完成。

关于我可以在哪里指定范围的任何想法？

【参考方案1】：

如果您的意思是为堆积面积图设置y-domain（应显示的数字范围），这对我有用：

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

【参考方案2】：

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

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

希望能帮助您了解函数实际在做什么，arboc7，这应该可以解释为什么它不能使范围小于数据集的范围。

【参考方案3】：

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

【讨论】：

有没有办法强制堆叠图表的范围，但在检查单个数据集时仍然具有自动缩放功能？例如当您单击示例中的“北美”时nvd3.org/examples/stackedArea.html

如果您有多个 y 轴，例如在多图表示例中，那么您必须这样做 yDomain1 和 yDomain2 等。请参阅此处列出的问题：github.com/krispo/angular-nvd3/issues/81

【参考方案4】：

我有一个类似的问题，并通过在 yAxis 的 yScale 中明确定义域来解决它，即

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

【参考方案5】：

我试过这样：

chart.forceY([DataMin, DataMax]);

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

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

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

【讨论】：

如果您只使用默认域和范围，nvd3 将根据您的数据集自动设置最小值/最大值。并在添加新数据时重新计算。

【参考方案6】：

找到了解决办法。

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

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

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

【讨论】：

这适用于我将范围扩大到折线图的 Max/Min 之外，但不适用于使范围小于数据。

注意：您可以使用.forceY(val)强制最小值，最大值将保持动态。

.forceY() 确保您给它的值会出现在屏幕上的某个位置。数据集中的任何 Y 值也将出现在屏幕上。您不能使用它来强制某些数据点离开屏幕。

.forceY([min, max]) 在多条形图中工作正常。请参阅此plunkr 以供参考。它基于 Angular nvd3 构建，但 forceY 的工作方式应该没有任何区别。