d3.js - D3js not removing element on exit

Question

I have a function that render text element with tspan. My problem is that draw() function append new text element and not removing the old one when redraw.

function draw(params) {
    let g = d3.select(`#msr_${Id}`);

    const value = params.Value;

    const [a, b, c, d, x, y] = params.Matrix;
    const matrix = [a, b, c, d, x + params.Coord[0], y + params.Coord[1]];

    let text = g
      .append("text")
      .attr("font-weight", params.Font.Weight)
      .attr("font-size", params.Font.Size)
      .attr("font-family", params.Font.Family)
      .attr("text-decoration", params.Font.Decoration)
      .attr("transform", `matrix(${matrix})`)
      .selectAll("text");

    let desc = text.select("tspan").data([params.MsrName]);
    desc
      .enter()
      .append("tspan")
      .text((d) => d);

    let textValue = text.select("tspan").data([value]);
    textValue
      .enter()
      .append("tspan")
      .text((d) => d);

    g.exit().remove();
  }

question from:https://stackoverflow.com/questions/65935930/d3js-not-removing-element-on-exit

Answer 1

I solve this creating svg group manually.

 <g id={`msr_${Id}`}>
      <text id={`msr_txt_${Id}`}>
        <tspan id={`msr_desc_${Id}`}></tspan>
        <tspan id={`msr_value_${Id}`}></tspan>
      </text>
    </g>

Here's code:

let g = d3.select(`#msr_${Id}`);

    let text = g
      .select(`#msr_txt_${Id}`)
   

    let desc = text.select(`#msr_desc_${Id}`).data([name]);
    desc.text((d) => d);
    desc.exit().remove();
    
    let textValue = text.select(`#msr_value_${Id}`).data([value]);
    textValue.text((d) => d);
    textValue.exit().remove();
    
    g.exit().remove()