From 6f5836ec959d76fb3fce2ee1afa05b9f15f2965d Mon Sep 17 00:00:00 2001
From: brown <brown2243@naver.com>
Date: Mon, 27 Mar 2023 17:11:35 +0900
Subject: [PATCH] fix: Matching names and data

---
 graph/stackedarea_basic.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/graph/stackedarea_basic.html b/graph/stackedarea_basic.html
index 49284a4..f9c2f80 100644
--- a/graph/stackedarea_basic.html
+++ b/graph/stackedarea_basic.html
@@ -245,11 +245,10 @@ <h5>Steps:</h5>
 
   // Stack the data: each group will be represented on top of each other
   var mygroups = ["Helen", "Amanda", "Ashley"] // list of group names
-  var mygroup = [1,2,3] // list of group names
   var stackedData = d3.stack()
-    .keys(mygroup)
+    .keys(mygroups)
     .value(function(d, key){
-      return d.values[key].n
+      return d.values.find((row) => row.name === key)?.n || 0;
     })
     (sumstat)
 
@@ -279,7 +278,7 @@ <h5>Steps:</h5>
     .data(stackedData)
     .enter()
     .append("path")
-      .style("fill", function(d) { name = mygroups[d.key-1] ;  return color(name); })
+      .style("fill", function(d) { return color(d.key); })
       .attr("d", d3.area()
         .x(function(d, i) { return x(d.data.key); })
         .y0(function(d) { return y(d[0]); })
@@ -315,14 +314,13 @@ <h5>Steps:</h5>
 
   // Stack the data: each group will be represented on top of each other
   const mygroups = ["Helen", "Amanda", "Ashley"] // list of group names
-  const mygroup = [1,2,3] // list of group names
   const stackedData = d3.stack()
-    .keys(mygroup)
+    .keys(mygroups)
     .value(function(d, key){
-      return d[1][key].n
+      return d[1].find((row) => row.name === key)?.n || 0;
     })
     (sumstat)
-
+    
   // Add X axis --> it is a date format
   const x = d3.scaleLinear()
     .domain(d3.extent(data, function(d) { return d.year; }))
@@ -348,7 +346,7 @@ <h5>Steps:</h5>
     .selectAll("mylayers")
     .data(stackedData)
     .join("path")
-      .style("fill", function(d) { name = mygroups[d.key-1] ;  return color(name); })
+      .style("fill", function(d) { return color(d.key); })
       .attr("d", d3.area()
         .x(function(d, i) { return x(d.data[0]); })
         .y0(function(d) { return y(d[0]); })