Tengo este gráfico de área de varias series y estoy tratando de obtener el valor correcto para aplicar la información sobre herramientas, pero no tengo idea real de cómo. He estado probando muchos ejemplos diferentes para obtener una información sobre herramientas que funcione en un gráfico de área de varias series, pero me ha costado encontrar una solución que funcione.
aquí hay un enlace al código:
https://codepen.io/quillcraft/pen/QWgawOY
Y en texto plano:
<script src="https://d3js.org/d3.v7.min.js"></script> <body></body> <script> const data = [ { year: "2020", Betty: "1", Deborah: "67", Dorothy: "34", }, { year: "2021", Betty: "3", Deborah: "33", Dorothy: "12", }, { year: "2022", Betty: "2", Deborah: "13", Dorothy: "45", } ]; const columns = ["Betty","Deborah","Dorothy"]; const color = d3.scaleOrdinal(d3.schemeAccent); const width = 600; const height = 300; const parseTime = d3.timeParse("%Y"); const x = d3.scaleTime().range([0, width]).domain(d3.extent(data, d => new Date(d.year).getFullYear())); const y = d3.scaleLinear().range([height, 0]).domain([0, 100]); const area = d3.area() .x(d => x(d.year)) .y0(height) .y1(d => y(d.value)); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.value)); const svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g"); columns.forEach((column, i) => { const newData = data.map(d => { return { year: new Date(d.year).getFullYear(), value: +d[column] }; }); svg.append("path") .data([newData]) .attr("class", "area") .attr("d", area) .attr("fill", color(i)) .attr("opacity", .5); svg.append("path") .data([newData]) .attr("class", "line") .attr("d", line) .attr("stroke", color(i)) .attr("stroke-width", 2) .attr("fill", "none"); }) </script>