Question

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

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

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

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

Answer 1

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

以下示例是为我解决的问题禁用：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);

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

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

4 个答案: