Tengo una aplicación que representa un gráfico de líneas a partir de conjuntos de datos creados mediante programación. Me gustaría permitir que los usuarios cambien entre diferentes modos de visualización, pero me cuesta convertir mi gráfico existente en una variedad diferente de gráfico.

Escribí este código para representar un gráfico de líneas:

 let graph = d3.select(graphingArea).append('svg'); ... if(type == "line"){ console.log("Graph type: Line"); for(let i = 0; i < frequencyResponseObjects.length; i++){ graph.selectAll(".line") .data(sessionGraphData) .enter() .append("path") .attr("fill", "none") .attr("stroke", function(d){return color(d[0])}) .attr("stroke-width", 1.5) .attr("d", function(d){ return d3.line() .x(function(d){return x(+d.frequency)}) .y(function(d){return y(+d.magnitude)}) (d[i+1]) }) } }

Eso funciona perfectamente, pero quiero cambiarlo a un gráfico de área haciendo algo como esto:

 if(type == "area"){ console.log("Graph type: Area"); for(let i = 0; i < frequencyResponseObjects.length; i++){ graph.selectAll(".line") .data(sessionGraphData) .enter() .append("path") .style("fill", "#377eb8") .attr("stroke", function(d){return color(d[0])}) .attr("stroke-width", 3) .attr("class", "area") .attr("d", function(d){ return d3.area() .x(function(d){return x(+d.frequency)}) .y0(y(graphMin)) .y(function(d){return y(+d.magnitude)}) (d[i+1]) }) } }

Esa función aún genera un gráfico de líneas, y no entiendo por qué, o cómo crear una función equivalente que dibuje un gráfico de área.

Hay gráficos de área D3 en línea, pero son diferentes de cómo construí mi gráfico lineal en formas que no entiendo. ¿Podría obtener un ejemplo de cómo debería verse un gráfico de área construido de manera similar?