Estoy tratando de replicar este ejemplo de un gráfico de líneas múltiples con puntos. Mis datos son básicamente los mismos, donde tengo un objeto con nombre y valores en el primer nivel, y luego un par de valores en el segundo nivel, valores internos. La longitud de las matrices dentro de los valores es 40.
Ahora, un requisito es que todos los puntos de todas las rutas estén dentro del mismo grupo g dentro del DOM. Esto me está dando muchos problemas porque parece que no puedo averiguar cómo unir los circles con la parte adecuada de los datos anidados.
Lo último que he probado es esto:
var symbolsb = d3.select("#plot-b") // plot-b is the graph area group within the svg .append("g") .attr("id", "symbols-b"); symbolsb.selectAll("circle") .data(games, function(d) {console.log(d.values) // games is my data object return d.values}) .enter() .append("circle") .attr("class", "symbolsb") .attr("cx", function(d,i) {console.log(d) return x(d.values.date);}) .attr("cy", function(d,i) {return y_count(d.count);}) .attr("r", function(d,i) { let parent = this.parentNode; let datum = d3.select(parent).datum(); console.log(parent) if (i%3 === 1 && included_names.includes(datum[i].name)) { return 8;} else {return null;}}) .style("fill", function(d,i) { let parent = this.parentNode; let datum = d3.select(parent).datum(); {return color(datum.name);}}); Como entiendo (incorrectamente) la función data() , pensé que al devolver d.values , las funciones en cx , cy y r solo verían la(s) matriz(es) que están dentro de d.values , pero cuando log d to la consola dentro de las funciones para definir cx , cy , etc. Vuelvo a ver los games full object. Nuevamente, pensé que solo debería obtener la parte de values del objeto.
Pude obtener un gráfico que se parece al resultado que quiero al cargar los datos y agregar una g al definir los symbolsb , pero esto crea un grupo para cada conjunto de círculos.
Creo que el problema proviene de mi confusión sobre cómo la función data() accede a los objetos anidados. Entonces, cualquier ayuda para explicar eso sería muy apreciada.
Sería genial si pudiera proporcionar una reproducción en vivo, por ejemplo, en un cuaderno Observable o VizHub .
Esta línea parece sospechosa
.data(games, function(d) {console.log(d.values) // games is my data object return d.values}) El segundo argumento para *selection*.data debe ser una 'función clave', una función que devuelve un identificador de cadena único para cada dato. Aquí está dando un objeto ( d.values ) que se convertirá en [object Object ] para cada punto de datos. Esto también explica por qué está viendo el objeto de games completos al iniciar sesión. Creo que aquí es seguro simplemente eliminar el segundo argumento de .data() :
.data(games)Esto tampoco se ve bien
.attr("r", function(d,i) { let parent = this.parentNode; let datum = d3.select(parent).datum(); console.log(parent) if (i%3 === 1 && included_names.includes(datum[i].name)) { return 8;} else { return null; *emphasized text*}}) No estoy completamente seguro de lo que estás tratando de hacer aquí. Si está tratando de acceder al nombre del punto de datos, simplemente puede acceder a él en el punto de datos usando .attr("r", function(d,i) { if (included_names.includes(d.name)) { return 8 } else { return 0} )