Estoy creando un gráfico de área D3 y el área se muestra arriba de la línea en lugar de debajo.
Gráfico de área con el área que aparece sobre la línea
Aquí hay un violín: https://jsfiddle.net/8xsrmgzw/
//Read the data d3.csv("https://raw.githubusercontent.com/kalidogg/UCB/main/DebtPenny6.csv", // When reading the csv, I must format variables: function(d){ return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value } }, // Now I can use this dataset: function(data) { // Add X axis --> it is a date format var x = d3.scaleTime() .domain(d3.extent(data, function(d) { return d.date; })) .range([ 0, width ]); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Add Y axis var y = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return +d.value; })]) .range([ height, 0 ]); svg.append("g") .call(d3.axisLeft(y)); // Add the area svg.append("path") .datum(data) .attr("fill", "#cce5df") .attr("stroke", "#69b3a2") .attr("stroke-width", 1.5) .attr("d", d3.area() .x(function(d) { return x(d.date) }) .y0(y(0)) .y1(function(d) { return y(d.value) }) ) }) </script>Gracias.
Hay un par de problemas. Primero, debe ordenar sus datos por fecha antes de dibujar el área. En segundo lugar, su conjunto de datos contiene valores nulos. En el siguiente ejemplo, los filtré, pero podría considerar hacer algo como estos ejemplos para indicar dónde faltan datos.
Además, establecer un color de trazo en el área creará un contorno del área, incluidos los lados y la parte inferior. Si solo desea una línea que delinee la parte superior del área, puede agregar una ruta separada y usar area.lineY1() para obtener un generador de líneas para la línea superior del área.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://d3js.org/d3.v7.js"></script> </head> <body> <div id="chart"></div> <script> d3.csv("https://raw.githubusercontent.com/kalidogg/UCB/main/DebtPenny6.csv", function(d) { return { date : d3.timeParse("%Y-%m-%d")(d.date), value : +d.value } }).then(chart); function chart(data) { // set up const margin = { top: 10, bottom: 30, left: 50, right: 10}; const width = 600 - margin.left - margin.right; const height = 200 - margin.top - margin.bottom; const svg = d3.select('#chart') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // filter and sort data data = data .filter(d => !isNaN(d.value)) .sort((a, b) => d3.ascending(a.date, b.date)); // scales const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([0, width]); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([height, 0]); // area generator const area = d3.area() .x(d => x(d.date)) .y0(y(0)) .y1(d => y(d.value)); // Add the area and top line g.append("path") .datum(data) .attr("fill", "#cce5df") .attr("d", area); g.append("path") .datum(data) .attr("stroke", "#69b3a2") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", area.lineY1()); // Axes g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y) .tickFormat(d3.format('~s')) .tickSizeOuter(0)); } </script> </body> </html>