Question

我使用NVD3生成多条/堆积图表。这是live fiddle。

我正在采用原始数据阵列，将其转换为兼容nvd3的结构，并维护当前年份的数据。（2018）和＆＃39;所有年份＆＃39;。顶部的按钮允许您在所有年份和当前年份之间切换。

我对结果图表感到满意，但有一个例外。如果执行以下步骤，Y轴的缩放不起作用：

1。）加载图表/小提琴

2。）点击第3组＆＃39;顶部图例区域的（橙色）标签几次

3.）注意左侧（Y轴）变化的方式缩放到最终的最小值/最大值

4。）现在点击“当前年份”＆＃39;顶部的按钮（仅显示一年的数据）

5.）再次点击第3组＆＃39;顶部图例区域的（橙色）标签几次...... Y轴现在根本没有缩放，以减少团队3＆＃39;被禁用。

当点击当前年份/所有年份按钮时，我运行以下操作，我认为会强制图表完全适应新数据集并自动根据数据设置其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组＆＃39;将Y轴最大值降低到下一个最高团队所拥有的392,710.1值（团队7）？我也注意到当你回到“全年”时。它不像最初那样工作（谈到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()
        }
});

关于您提及的功能的说明：

我也观察到，当你回到'All Years'时，它不会像最初那样起作用

这是因为首次加载图表时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 ”时它仍然可以扩展的原因。

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

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

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

1 个答案: