javascript - tutorial - Usando d3.js, ¿cómo puedo mostrar datos más rápido en mi gráfico?

librería de visualización d3 js

Question

En mi código, estoy cargando un JSON con 508 entradas en un gráfico de líneas. Este JSON contiene datos emitidos por algunas máquinas, y las claves son los nombres de las máquinas.

Esta es la estructura de mi JSON:

{
    "AF3":3605.1496928113393,
    "AF4":-6000.4375230516,
    "F3":1700.3827875419374,
    "F4":4822.544985821321,
    "F7":4903.330735023786,
    "F8":824.4048714773611,
    "FC5":3259.4071092472655,
    "FC6":4248.067359141752,
    "O1":3714.5106599153364,
    "O2":697.2904723891061,
    "P7":522.7300768483767,
    "P8":4050.79490288753,
    "T7":2939.896657485737,
    "T8":9.551935316881588
}

Actualmente estoy leyendo los datos con la ayuda de un contador llamado cont , sin embargo, el código que estoy usando tarda demasiado en dibujar el gráfico:

data.length=508

if (data.length>cont)
 cont++`

for (var name in groups) {
  var group = groups[name]
  group.data.push(aData[cont][name])
  group.path.attr(''d'', line)
  console.log(cont)
}

Como puede ver en el gif anterior, mi código tarda demasiado en trazar todos los puntos de datos. Me gustaría dibujar todos los elementos de datos de mi conjunto de datos (en este caso 508) sin demora, por ejemplo:

data=[{508 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.

data2=[{50 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.

Donde tick es el nombre de la función que dibujaría las coordenadas, sin perder el sentido de la animación.

¿Cómo puede hacerlo?

Aquí hay un enlace a mi código:

http://plnkr.co/edit/y8h9zs1CpLU1BZRoWZi4?p=preview

Answer 1

Me parece que su problema es el hecho de que el gráfico es sincrónico: "duración" se usa tanto para la animación como para el desplazamiento de gráficos. Esencialmente, cambiar la duración no servirá de nada.

Puede introducir un multiplicador de tiempo. Luego, intente dividir la duración entre dos y use un multiplicador de 2. La duración real de los datos ahora es la duración * timeMultiplier (es posible que desee cambiar los nombres para hacerlo menos confuso, o use un divisor de tiempo en la animación).

// Shift domain
x.domain([now - (limit - 2) * duration * timeMultiplier, now - duration * timeMultiplier])

// Slide x-axis left
axis.transition()
  .duration(duration)
  .ease(''linear'')
  .call(x.axis);

// Slide paths left
var t = paths.attr(''transform'', null)
  .transition()
  .duration(duration)
  .ease(''linear'')
t.attr(''transform'', ''translate('' + x(now - (limit - 1) * duration * timeMultiplier) + '')'')
  .each(''end'', tick)

Otra cosa que puede intentar es agregar los puntos de dos en dos, es decir, omita el turno en tics impares y cambie el doble de la cantidad en tics pares. Esto reduce la sobrecarga a expensas de hacer que la animación sea un poco más irregular (pero no mucho, porque también se reproduce más rápido).