javascript - 如何在 nvd3 简单折线图中默认禁用某些流？

Question

我有几行，我知道单击图例中的“点”将隐藏/显示它。

但是，我需要从一些被禁用且未显示的行开始，并且用户必须单击图例中的点才能将其显示在图表上。

（例如，我绘制了每种语言在 stackoverflow 上的问题数量，但默认情况下禁用了 C、PHP 和 javascript）。该图仅显示了 python、ruby ......但在图例中，您拥有所有语言，包括 C、PHP 和 js，而这 3 种语言被禁用。

我还没有找到每个数据系列的方法/属性来设置默认的显示/隐藏状态。我错过了什么吗？

Answer 1

在阅读了这个答案之后，我仍然需要做更多的阅读，以便了解如何从我的 JSON 数据流中为图表设置禁用流。

下面的示例为我解决了问题disabled: true

    {
    key: "something",
    disabled: true,
    values: [...]
    }

Answer 2

您可以使用该chart.state()对象更改启用/禁用哪些流。例如：

// Assuming your chart is called 'chart'
var state = chart.state();

for(var i=0; i < state.disabled.length; i++) {
  state.disabled[i] = ...LOGIC RETURNING TRUE OR FALSE...;
}

chart.dispatch.changeState(state);
chart.update();

Answer 3

对于您想要禁用的每个数据系列，只需执行以下操作：

series.disabled=true

nvd3 并不能做所有事情，但是如果您愿意仔细阅读代码，它实际上是非常灵活的。我通过在几个图表模型的源代码中找到这条线发现了这一点：

state.disabled = data.map(function(d) { return !!d.disabled });

Answer 4

你可以从一个隐藏的图表开始，然后尝试这样的事情：

// Array of series you want to hide
var hidden = [0, 2];

// Dispatch click event to each element
var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true);
d3.select('.nv-legend')
  .selectAll('.nv-series')
  .filter(function(d, i){return hidden.indexOf(i) !== -1;})
  .node()
  .dispatchEvent(e);

完成后，取消隐藏您的图表，该系列将被禁用。