I have this multi-series area chart and I am trying to get the correct value to apply the tooltip, but have no real idea how. I've been trying many different examples to get a tooltip working on a multi-series area graph, but have been struggling to come up with a working solution.
here is a link to the code:
https://codepen.io/quillcraft/pen/QWgawOY
And in plain text:
<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>