React useEffect 加载新的但不会清除旧的

如何解决React useEffect 加载新的但不会清除旧的

https://codesandbox.io/s/stacked-bar-useeffect-upbf8

在上面的代码中，props 键发生了变化，图形也更新了，但之前的迭代仍然出现并弄得一团糟。我哪里错了？我尝试进行清理，并使用了所需的最少代码来查看我可以更新哪些内容，但最终还是得到了相同的结果。

      <Observer>
        {() => <BarStacked keys={store.keys} store={store} />}
      </Observer>

    const BarStacked = (props) => {
  var max_y = 100;

  const margin = props.store.graPHPreferences.margin;
  const width = props.store.graPHPreferences.width;
  const height = props.store.graPHPreferences.height;
  const svgRefHours = useRef();

  useEffect(() => {
    const svg = d3.select(svgRefHours.current);

    const chart = svg
      .append("g")
      .attr("transform",`translate(${margin},${margin})`);

    const stackGenerator = stack()
      .keys(props.store.keys)
      .order(stackOrderAscending);
    const layers = stackGenerator(data);
    const extent = [
      0,max(layers,(layer) => max(layer,(sequency) => sequency[1]))
    ];

    const xScale = d3
      .scaleBand()
      .domain(data.map((d) => d.dayofmonth))
      .range([0,width])
      .padding(0.25);

    const xAxis = axisBottom(xScale);

    const yScale = d3.scaleLinear().domain(extent).range([height,0]);

    // vertical grid lines
    const makeXLines = () => d3.axisBottom().scale(xScale);

    const makeYLines = () => d3.axisLeft().scale(yScale);

    chart
      .append("g")
      .attr("transform",`translate(0,${height})`)
      .call(d3.axisBottom(xScale));

    chart.append("g").call(d3.axisLeft(yScale));

    // vertical grid lines
    chart
      .append("g")
      .attr("class","grid")
      .attr("transform",${height})`)
      .call(makeXLines().tickSize(-height,0).tickFormat(""));

    chart
      .append("g")
      .attr("class","grid")
      .call(makeYLines().tickSize(-width,0).tickFormat(""));

    const barGroups = chart.selectAll().data(data).enter().append("g");

    barGroups
      .selectAll(".layer")
      .data(layers)
      .join("g")
      .attr("class","layer")
      .attr("fill",(layer) => props.store.colors[layer.key])
      .selectAll("rect")
      .data((layer) => layer)
      .join("rect")
      .attr("x",(sequence) => xScale(sequence.data.dayofmonth))
      .attr("width",xScale.bandwidth())
      .attr("y",(sequence) => yScale(sequence[1]))
      .attr("height",(sequence) => yScale(sequence[0]) - yScale(sequence[1]))
      .on("mouSEOver",function () {
        //  d3.selectAll(".dayofmonth").attr("fill",)
        d3.select(this).attr("fill","blue");
      })
      .on("mouSEOut",function () {
        d3.select(this).attr("fill",(layer) => props.store.colors[layer.key]);
      });

    const yAxis = axisLeft(yScale);
    svg.select(".y-axis").call(yAxis);

    svg
      .append("text")
      .attr("class","label")
      .attr("x",-(height / 2) - margin)
      .attr("y",margin / 2.4)
      .attr("transform","rotate(-90)")
      .attr("text-anchor","middle")
      .text("Number of Tracks");

    svg
      .append("text")
      .attr("class",width / 2 + margin)
      .attr("y",height + margin * 1.7)
      .attr("text-anchor","middle")
      .text("Day of the Month");

    svg
      .append("text")
      .attr("class","title")
      .attr("x",40)
      .attr("text-anchor","middle")
      .text("Tracks per day of the month");

    return () => {};
  },[
    height,max_y,props,width,margin,props.store.colors,props.store.keys
  ]);

  return (
    <svg ref={svgRefHours}>
      <g className="x-axis" />
      <g className="y-axis" />
    </svg>
  );
};

**edit 是添加代码，链接仍然可用，因为我不确定什么与问题相关。