javascript - font - ¿Cómo deshabilitar algunas transmisiones de forma predeterminada en un nvid3 Simple Line Chart?

set title highchart

Question

Tengo varias líneas y sé que al hacer clic en el "punto" en la leyenda, se ocultará / mostrará.

Sin embargo, necesito comenzar con algunas líneas que se deshabilitan y no se muestran, y el usuario tendrá que hacer clic en el punto de la leyenda para mostrarlo en el gráfico.

(por ejemplo, grafico el número de preguntas en stackoverflow por idioma, pero con C, PHP y Javascript desactivados por defecto). el gráfico solo muestra python, ruby ​​... pero en la leyenda, tiene todos los idiomas, incluidos C, PHP y js, con estos 3 desactivados.

No he encontrado un método / atributo para cada serie de datos para establecer el estado predeterminado de mostrar / ocultar. ¿Me estoy perdiendo de algo?

Answer 1

NVD3 no es lo suficientemente flexible para eso; no te falta nada, no puedes hacer eso (al menos no de la caja). Tendrá que implementar esta funcionalidad usted mismo, o usar D3 viejo simple.

Answer 2

Puedes comenzar con un gráfico oculto y probar algo como esto:

// 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 vez que esto termine, muestre su tabla y la serie se desactivará.

Answer 3

Para cada una de sus series de datos que quiera deshabilitar, solo haga lo siguiente:

series.disabled=true

nvd3 no hace todo, pero si estás dispuesto a leer detenidamente el código, en realidad es bastante flexible. Descubrí esto al encontrar esta línea en la fuente de varios de los modelos de gráficos:

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

Answer 4

Puede cambiar qué flujos se habilitan / deshabilitan utilizando el objeto chart.state() . Por ejemplo:

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

Después de leer esta respuesta, tuve que leer un poco más para poder entender cómo configurar una secuencia deshabilitada de mi secuencia de datos JSON para los gráficos.

El siguiente ejemplo es lo que lo resolvió para mí deshabilitado: verdadero

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