Tengo un conjunto de datos llamado graphData con tres valores, longitud de wavelength , magnitude y name .
let array = [ {name: "dataset 1", wavelength: 2, magnitude: 20} {name: "dataset 1", wavelength: 3, magnitude: 22} {name: "dataset 1", wavelength: 4, magnitude: 19} {name: "dataset 2", wavelength: 2, magnitude: 14} //and so on... ] He agrupado el conjunto de datos usando d3.group() usando el valor del name como clave
let sortedGraphData = d3.group(graphData, d => d.fullId)Que debería devolver una estructura de mapa como esta:
{key: "dataset 1" values: [ {wavelength: 2, magnitude: 20} {wavelength: 3, magnitude: 22} {wavelength: 4, magnitude: 19} ]} {key: "dataset 2" values: [ {wavelength: 2, magnitude: 14} ///and so on... ]}Pero cuando trato de dibujar esos datos en mi gráfico con
let valueline = d3.line() .x(function(d){return x(+d.wavelength)}) .y(function(d){return y(+d.magnitude)}); graph.append("path") .data(sortedSessionGraphData) .attr("class", "line") .attr("d", valueline); Recibo el siguiente error: Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".
Me imagino que d3.line().x(function(d){return +d.wavelength}) no devuelve una matriz de pares de datos de longitud de onda y magnitud como yo quiero, pero no estoy seguro de cómo exponer los datos correctos dentro del mapa.
¿Cómo navega a través de un mapa y grafica nuevas líneas para cada uno de los objetos contenidos dentro de un mapa?
Dado que la salida de d3.group es un mapa de javascript, debe convertirse en una matriz de tuplas [key,value] para que sea iterable:
let sortedGraphData = Array.from(d3.group(graphData, d => d.fullId))Con este cambio, sortedGraphData ahora tiene la siguiente estructura:
[ ["dataset 1", [{wavelength: 2, magnitude: 20}, ...] ], ["dataset 2", [{wavelength: 2, magnitude: 14}, ...] ], ] El uso de sortedGraphData con append creará una ruta para cada conjunto de datos, y el atributo d de la ruta SVG se puede calcular pasando los valores a la función del generador de líneas. Dado que la matriz de valores es el segundo elemento de cada conjunto de datos, se puede acceder a ella con el índice 1:
.attr("d", d => valueline(d[1])) .