javascript - nvd3 multibar - 使用不同的图例状态更新现有图表(就像单击它们一样)

Question

我需要有关如何访问和“更新”nvd3 multiBarChart(以及其他诸如 stackedAreaChart、multiChart)中的状态的帮助。我正在使用 nvd3 1.7.x，并且有一个正在运行的 multiBarChart，其中包含来自 JSON 文件的一些源(状态)。此外，我有多个具有相同源(状态)的不同时间集的 JSON 文件。

我搜索了很多关于这个问题的答案和提示，发现旧问题(旧nvd3版本)中只有2个命中nvd3 passing wrong event on stateChange (when clicking legend) after chart is reloaded和 How to disable some streams by default in a nvd3 Simple Line Chart?关于 nvd3 1.1 或更早版本，由于存在错误，他们讨论了解决方法。由于我们在 2015 年更新到 1.7，并且状态函数(getter、setter 等)发生了一些变化，我想知道这个错误是否仍然存在以及如何以正确的方式使用新函数。注释和新文档并没有帮助我(仅对于已弃用的 defaultState 来说:使用dispatch.stateChange(state); 来代替)。

<小时/>

好的，我该怎么办/需要什么？:我想将用户对状态所做的更改/选择保存为“配置”变量，然后我想将这些状态恢复到同一个图表对象，该图表对象已使用具有相同可用状态的不同数据(另一个 json 文件)进行更新。我的问题是，json 文件存储了默认状态设置，如果用户循环浏览数据集，我需要覆盖这些默认状态设置 - 否则他需要在每次更改时再次选择流配置。

示例:假设我们的图表运行有堆叠和分组可用以及一些流:stream1、stream2、stream3。默认情况下，图表加载堆叠 View ，并且所有 3 个流在 json 文件中可见，例如“2015”。

chart.stacked(): {true}
chart.state.disabled: {"disabled":[false,false,false]}

因此，如果用户只想比较不同时间序列中的流 1 和 3，他会停用/点击流 2:

chart.stacked(): {true}
chart.state.disabled: {"disabled":[false,true,false]}

之后，此设置被存储(这是有效的!)，并且需要为下一个数据集恢复(不同的 json 文件，例如“2014”)(现在不起作用)。

<小时/>

我拥有的是一个工作图表，它正在加载和显示不同的 json 文件。选择是通过下拉列表实现的，事件是通过 jquery 触发的。我可以通过获取以下值来保存状态:

chart.stacked();
chart.state.disabled;
chart.reduceXTicks();

当我覆盖保存的状态时，我可以在 chart.state.disabled 中看到新值，但在 chart.update(); 之后，它们消失了，我看到来自 json 文件/初始图表对象的默认状态。

我已经尝试过不同的函数，例如调度函数(changeState、stateChange)，但在图表更新后我没有成功保留值。

//oldStates is a copy of the last states before switching to a new time set (json file) in the chart.
chart.state.disabled = oldStates; 
// works but chart.update overwrites it with default values!

chart.defaultState(oldStates);
// NO changes. marked as DEPRECATED in documentation saying: Use chart.dispatch.changeState(...) instead.

chart.dispatch.changeState(oldStates); 
// No change, not working?

我很高兴获得任何提示/提示如何通过覆盖/更改单个状态来更改状态并用它们更新图表，仅渲染新的选择。谢谢!

Answer 1

也许这有帮助: http://plnkr.co/edit/CoGZkNoe4COEtjHMWtk6?p=preview

    data = data.map(function(series){
      if (series.key === 'Disabled Series Key'){
        series.disabled = true;
      }
      return series;
    });

您可以在将系列数组传递到图表之前设置各个系列的禁用属性。