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

Question

我正在使用NVD3生成多条/堆叠图表。 这是现场的小提琴 。

我正在获取原始数据数组，将其转换为与nvd3兼容的结构，并为“当年”（2018年）和“所有年”维护数组。 顶部的按钮允许您在所有年份和当前年份之间切换。

我对结果图表感到满意，但有一个例外。 如果执行以下步骤，Y轴的缩放比例将无效：

1.）加载图表/小提琴

2.）单击顶部图例区域中的“团队3”（橙色）标签几次

3.）注意左侧（Y轴）更改为缩放到所产生的最小/最大的方式

4.）现在单击顶部的“当前年份”按钮（仅显示单个年份的数据）

5.）再次单击顶部图例区域中的“ team 3”（橙色）标签两次... Y轴现在根本无法缩放以减小禁用“ 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); 

要禁用“第3队”，我该怎么做才能将Y轴最大值减小到第二高的队（第7队）的392,710.1？ 我还观察到，当您返回到“所有年份”时，它不像它最初那样工作（谈到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()
        }
});

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

我还观察到，当您返回“所有年份”时，它不像最初那样起作用

这是因为首次加载图表时，未使用chart.forceY ，因此Y轴将正确缩放。 当您回到“所有年份”时，它会应用（ 或更确切地说是尝试应用 ） chart.forceY ，这种情况最初并未发生，从而导致出现此问题。

实际上，此问题是由于chart.forceY(..)对于您看来似乎是错别字的初始数据集不起作用。 仔细查看第119行：

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

uniqueDollarAmounts2应该是uniqueDollarAmounts ，因此uniqueDollarAmounts2[uniqueDollarAmounts.length-1]是undefined 。 这会导致.forceY无法按预期工作，这就是为什么在过滤“ Team3 ”时它仍会缩放的Team3 。

这是在初始图表上显示chart.forceY和拼写错误的小提琴 。 请注意，在任何情况下过滤数据时，Y轴都不会更改。 2018年数据的最小值有所不同，因此您会注意到较低的值确实确实如预期的那样从0更改为6,641.8 。

这是一个小工具 ，其中删除了chart.forceY实例。 请注意，Y轴现在可以适当缩放。