在此 NVD3 多条形图中更改数据集时如何缩放 Y 轴？

Question

我正在使用 NVD3 生成多条形图/堆积图。这里有一个live fiddle.

我正在获取原始数据数组，将其转换为 nvd3 兼容结构，并维护 'current year' (2018) 和 'all years' 的数组。顶部的按钮允许您在所有年份和当前年份之间切换。

除了一个例外，我对生成的图表很满意。如果执行以下步骤，则 Y 轴的缩放不起作用：

1.) 加载图表/fiddle

2.) 单击顶部图例区域的 'team 3'（橙色）标签几次

3.) 注意左侧（Y 轴）随结果最小值/最大值变化的方式

4.) 现在点击顶部的 'Current Year' 按钮（只显示一年的数据）

5.) 再次单击顶部图例区域的 'team 3'（橙色）标签几次...当 'team 3' 已禁用。

单击当前年份/所有年份按钮时，我运行以下内容我认为会强制图表完全适应新数据集并自动设置其 Y 轴边界基于在数据和图例项目上切换：

data = convertedArray; // THE ALTERNATE ARRAY OF DATA
chart.forceY([uniqueDollarAmounts[0], // THE DISTINCT VALUES THAT GOVERN THE Y AXIS AMOUNTS (AND BOUNDS?)
uniqueDollarAmounts2[uniqueDollarAmounts.length-1]]);
d3.select('#NVD3Chart svg').datum(data).call(chart);

我需要做什么才能禁用 'team 3' 将 Y 轴最大值降低到下一个最高团队（团队 7）的 392,710.1 值？我还观察到，当您 return 回到 'All Years' 时，它不像最初那样工作（谈到 Y 轴的缩放比例）...所以我在旋转时破坏了一些东西显然是第二个数据集。

Answer 1

chart.forceY(..)的目的其实和你想要的相反，它保证Y轴会而不是过滤显示的数据时缩放。对 .datum(data) 的调用根据 data 处理轴和数据中的更改。事实上，只需删除这两个实例，Y 轴缩放就会起作用。

$('#sort').click(function() {

    if ($(this).val() == "All Years") {
      $(this).val("Current Year");
        data = convertedArray;
        //chart.forceY([uniqueDollarAmounts[0], uniqueDollarAmounts2[uniqueDollarAmounts.length-1]]);
        d3.select('#NVD3Chart svg').datum(data).call(chart);
        nv.utils.windowResize(chart.update);
        getLowerTeamData()
      }
      else {
        $(this).val("All Years");
          data = convertedArray2;
          //chart.forceY([uniqueDollarAmounts2[0], uniqueDollarAmounts2[uniqueDollarAmounts2.length-1]]);
          d3.select('#NVD3Chart svg').datum(data).call(chart);
          nv.utils.windowResize(chart.update);
          getLowerTeamData()
        }
});

关于您提到的功能的注释：

I also have observed that when you return back to 'All Years' it doesn't work as it does initially

这是因为首次加载图表时未使用 chart.forceY，因此 Y 轴将正确缩放。当您返回 'All Years' 它适用（ 或者更确切地说试图应用 ）chart.forceY 最初并没有发生导致出现此问题。

这个问题实际上是由于 chart.forceY(..) 不适用于您的初始数据集，这似乎是您的拼写错误。仔细看第119行：

chart.forceY([uniqueDollarAmounts[0], uniqueDollarAmounts2[uniqueDollarAmounts.length-1]]);

uniqueDollarAmounts2应该是uniqueDollarAmounts，所以uniqueDollarAmounts2[uniqueDollarAmounts.length-1]的值是undefined。这会导致 .forceY 无法按预期工作，这就是为什么当您过滤“Team3”时它仍然显示缩放的原因。

Here is a fiddle 在初始图表上显示 chart.forceY 并更正拼写错误。请注意，在任何情况下过滤数据时，Y 轴都不会改变。 2018 年数据的最小值不同，因此您会注意到较低的值确实如您预期的那样从 0 和 6,641.8 发生变化。

Here is a fiddle 其中 chart.forceY 的实例被删除。请注意，Y 轴现在可以适当缩放。

在此 NVD3 多条形图中更改数据集时如何缩放 Y 轴？

How can I scale Y axis when changing dataset in this NVD3 multi bar chart?

javascript

json

nvd3.js