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 name y values en el primer nivel, y luego un par de valores en el segundo nivel dentro de values . En su mayor parte, mi código funciona, pero por alguna razón, el índice j en la función anónima para el relleno devuelve una matriz de circle repetidos en lugar de devolver el padre del elemento actual. Creo que esto puede tener algo que ver con la forma en que creé el svg y seleccioné los elementos, pero no puedo resolverlo. A continuación se muestra un extracto de mi código que muestra cómo creé el svg, la ruta de la línea y los círculos.
var svgb = d3.select("body") .append("svg") .attr("id","svg-b") .attr("width", width) .attr("height", height) var gameb = svgb.selectAll(".gameb") .data(games) .enter() .append("g") .attr("class", "gameb"); gameb.append("path") .attr("class", "line") .attr("d", function(d) {return line_count(d.values); }) .style("stroke", function(d) { return color(d.name); }) .style("fill", "none"); gameb.selectAll("circle") .data(function(d) {return d.values;}) .enter() .append("circle") .attr("cx", function(d) {return x(d.date);}) .attr("cy", function(d) {return y_count(d.count);}) .attr("r", 3) .style("fill", function(d,i,j) {console.log(j) return color(games[j].name);});j (o más exactamente, el tercer parámetro) siempre serán los nodos en la selección (la matriz de círculos aquí), no el padre. Si quieres el dato padre puedes usar:
.attr("fill", function() { let parent = this.parentNode; let datum = d3.select(parent).datum(); return color(datum.name); }) Tenga en cuenta que usar ()=> en lugar de function() cambiará this contexto y lo anterior no funcionará.
Sin embargo, en lugar de colorear cada círculo de forma independiente, también podría usar a o la g principal para colorear los círculos:
gameb.append("g") .style("fill", function(d) { return color(d.name); }) .selectAll("circle") .data(function(d) {return d.values;}) .enter() .append("circle") .attr("cx", function(d) {return x(d.date);}) .attr("cy", function(d) {return y_count(d.count);}) .attr("r", 3); Aquí agregamos una g intermedia (aunque podríamos usar la matriz original con algunas modificaciones adicionales), le aplicamos un color de relleno y luego la g primaria coloreará los círculos secundarios por nosotros. El dato se transmite a este nuevo g entre bastidores.