Come disabilitare alcuni flussi per impostazione predefinita in un grafico a linee semplici nvd3?

Question

Ho diverse righe e so che cliccando sul "punto" nella legenda lo nascondere/mostrare.

Tuttavia, ho bisogno di iniziare con alcune delle linee disabilitate e non visualizzate, e l'utente dovrà fare clic sul punto nella legenda per visualizzarlo sul grafico.

(ad esempio grafico il numero di domande sullo stackoverflow per lingua, ma con C, PHP e javascript disabilitato per impostazione predefinita). il grafico mostra solo python, ruby ​​... ma nella legenda, hai tutte le lingue, incluse C, PHP e js con queste 3 disabilitate.

Non ho trovato un metodo/attributo per ogni serie di dati per impostare lo stato di visualizzazione/occultamento predefinito. Mi sto perdendo qualcosa?

Answer 1

Per ciascuna della vostra serie di dati che si desidera disabili, basta fare:

series.disabled=true 

nvd3 non fa tutto, ma se siete disposti a esaminare il codice in realtà è abbastanza flessibile. Ho scoperto questo trovando questa linea nella fonte di molti dei modelli di grafico:

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

Answer 2

NVD3 non è abbastanza flessibile per questo - non ti manca nulla, non puoi farlo (almeno non fuori dalla scatola). Dovresti implementare questa funzionalità da solo, o usare il vecchio D3.

Answer 3

Si potrebbe iniziare con un grafico nascosto e provare qualcosa di simile:

// 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); 

Una volta che questo finisce, scoprire il grafico e la serie sarà disabilitata.

Answer 4

È possibile modificare la flussi sono abilitati/disabilitati utilizzando l'oggetto chart.state(). Per esempio:

// 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 5

Dopo aver letto questa risposta dovevo ancora fare un po 'di più la lettura in modo per me capire come impostare un flusso disabilitata dal mio JSON flusso di dati per i grafici.

L'esempio che segue è quello che ha risolto per me disabile: vero

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