Estoy tratando de hacer un svg rectangular dentro de un envoltorio svg div pero de alguna manera obtengo dos o, a veces, múltiples envoltorios svg div. Supongo que uno se crea cuando los datos no están disponibles y otro cuando el componente de actualización useEffect cuando se cargan los datos, pero podría estar equivocado. No sé por qué está sucediendo, puede haber un error tonto o un error lógico. Soy nuevo en el aprendizaje de D3, así que perdóname y guíame. Por favor ayuda. a continuación se muestra el código. Gracias

 import React, { useState, useEffect } from 'react'; import * as d3 from 'd3'; const LineChart = () => { const weatherDataUrl = 'https://gist.githubusercontent.com/anujshaanmydash/17687a309a87105ab8991a3dcfd8c7e3/raw/weatherData.json'; const [data, setData] = useState(null); useEffect(() => { d3.json(weatherDataUrl).then(setData); }, []); if (!data) { return <pre>Loading....</pre>; } console.log(data); const yAccessor = (d) => d.temperatureMax; const dateParser = d3.timeParse('%Y-%m-%d'); const xAccessor = (d) => dateParser(d.date); let dimensions = { width: 1200, height: 500, margins: { top: 15, right: 15, bottom: 30, left: 50, }, }; dimensions.boundedWidth = dimensions.width - dimensions.margins.left - dimensions.margins.right; dimensions.boundedHeight = dimensions.height - dimensions.margins.top - dimensions.margins.bottom; const wrapper = d3 .select('#Wrapper') .append('svg') .attr('width', dimensions.width) .attr('height', dimensions.height); const bounds = wrapper .append('g') .style( 'transform', `translate(${dimensions.margins.left}px,${dimensions.margins.top}px)` ); //Create Scales const yScale = d3 .scaleLinear() .domain(d3.extent(data, yAccessor)) .range([dimensions.boundedHeight, 0]); const freezingTempArea = yScale(32); const freezingTemp = bounds .append('rect') .attr('x', 0) .attr('width', dimensions.boundedWidth) .attr('y', freezingTempArea) .attr('height', dimensions.boundedHeight - freezingTempArea) .attr('fill', '#e0f3f3'); const xScale = d3 .scaleTime() .domain(d3.extent(data, xAccessor)) .range(0, dimensions.boundedWidth); return <div id='Wrapper'></div>; }; export default LineChart;