Как отключить некоторые потоки по умолчанию в простой линейной диаграмме nvd3?

У меня есть несколько строк, и я знаю, что нажатие на "точку" в легенде скроет/покажет его.

Однако мне нужно начать с того, что некоторые из отключенных строк не отображаются, и пользователю нужно щелкнуть точку в легенде, чтобы показать ее на графике.

(например, я нарисую количество вопросов о stackoverflow для каждого языка, но по умолчанию C, PHP и javascript отключены). на графике отображаются только python, ruby ... но по легенде у вас есть все языки, включая C, PHP и js, причем эти 3 отключены.

Я не нашел метод/атрибут для каждой серии данных, чтобы установить статус show/hide по умолчанию. Я что-то пропустил?

Ответ 1

Для каждой из ваших серий данных, которые вы хотите отключить, просто выполните:

series.disabled=true

nvd3 не делает все, но если вы хотите просмотреть код, он на самом деле довольно гибкий. Я обнаружил это, найдя эту строку в источнике нескольких моделей диаграмм:

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

Ответ 2

После прочтения этого ответа мне все еще нужно было прочитать больше, чтобы понять, как отключить поток из моего потока данных JSON для графиков.

Ниже приведен пример, который решил для меня отключено: true

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

Ответ 3

Вы можете изменить, какие потоки включены/отключены с помощью объекта 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();

Ответ 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);

Как только это закончится, покажите свою диаграмму, и серия будет отключена.

Ответ 5

NVD3 на самом деле не достаточно гибкий - вам ничего не хватает, вы не можете этого сделать (по крайней мере, не из коробки). Вам нужно будет реализовать эту функциональность самостоятельно или использовать простой старый D3.