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

xav*_*ier 19 javascript d3.js nvd3.js

我有几行,我知道单击图例中的"点"将隐藏/显示它.

但是,我需要从一些禁用但未显示的行开始,用户必须单击图例中的点以在图表上显示它.

(例如,我绘制了每种语言的stackoverflow问题的数量,但默认情况下禁用了C,PHP和javascript).图表只显示了python,ruby ......但是在图例中,你拥有所有语言,包括C,PHP和js,这三种语言被禁用.

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

小智 23

在阅读完这个答案之后,我仍然需要做更多的阅读,以便让我了解如何设置从我的JSON数据流中禁用流的图形.

以下示例是为我解决的问题:true

    {
    key: "something",
    disabled: true,
    values: [...]
    }
Run Code Online (Sandbox Code Playgroud)


Kur*_*ton 14

您可以使用该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();
Run Code Online (Sandbox Code Playgroud)


jss*_*ian 8

对于要禁用的每个数据系列,只需执行以下操作:

series.disabled=true
Run Code Online (Sandbox Code Playgroud)

nvd3不会做任何事情,但如果你愿意仔细阅读代码,它实际上非常灵活.我通过在几个图表模型的源代码中找到这一行来发现这一点:

state.disabled = data.map(function(d) { return !!d.disabled });
Run Code Online (Sandbox Code Playgroud)