我有一个函数，当我单击检查它时，它一次又一次地调用函数

问：

demo（） 函数是一个饼图，我有一个带有复选框的切换按钮，每当我切换它时，它都会调用 demo（） 函数，这很好，但每当我单击复选框（切换按钮）时，它都会创建饼图的副本，它会更改图表周围的值，这工作正常，但它一次又一次地调用饼图函数，并且多个饼图正在使用切换创建按钮。只有当我的意思是它不会创建饼图的副本并删除旧图表时，我该怎么办？

async function renderTradesInfo() {
    let tradeOrders = await TradesInformation();

    totalTrades = tradeOrders.data.total_orders;
    

    let ThirtydOrders = tradeOrders.data.orders_placed_30d;
    let ThirtydOrder = `${ThirtydOrders}`;
    let thirtydOrderTrade=  $("#tradeCharts").find("#thirtydOrderTrade");
    thirtydOrderTrade.html(ThirtydOrder);

    let checkedValue = $('#checkbox1').is(':checked');
    if(!checkedValue){
        closedOrdersTrade(tradeOrders);
        totalTrades = tradeOrders.data.total_orders;
        demo(totalTrades);
    }

    $('#checkbox1').on('change', function () {

        if ($(this).is(':checked')){
            let openProfitOrders = tradeOrders.data.open_profit_orders;
            let openProfitOrder = `${openProfitOrders} Profit`;
            let tradeChartProfit=  $("#tradeCharts").find(".tradeChartProfit");
            tradeChartProfit.html(openProfitOrder);
        
            let openLossOrders = tradeOrders.data.open_loss_orders;
            let openLossOrder = `${openLossOrders} Loss`;
            let tradeChartLoss=  $("#tradeCharts").find(".tradeChartLoss");
            tradeChartLoss.html(openLossOrder);
            
            // totalTrades = tradeOrders.data.open_orders;
            demo(totalTrades);
        }
        else {
            closedOrdersTrade(tradeOrders);
            // totalTrades = tradeOrders.data.closed_orders;
            demo(totalTrades);
        }
     
     });
}

这是我想在切换时更新的饼图函数，但它正在创建新的饼图

function demo(totalTrades){

const chartData = [
    { name: 'Loss', value: 10},
    { name: 'Profit', value: 90}
  ]

  const colors = ['#EB5757', '#1EE8B7']
  
  const margin = { top: 10, right: 0, bottom: 0, left: 45 },
    width = 190 - margin.right - margin.left,
    height = 210,
    radius = width / 2
  
  const colorScale = d3.scaleOrdinal().range(colors)
  
  const arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 25)
  
  const textArc = d3.arc()
    .outerRadius(radius - 50)
    .innerRadius(radius - 50)
  
  const pie = d3.pie()
    .sort(null)
    .value(d => d.value)
  
  const svg = d3.select('.wrapper')
    .append('svg')
    .attr('transform', `translate(${margin.left}, 0)`)
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', `translate(${width / 2}, ${height / 2 - 30})`)
  
  const g = svg.selectAll('.arc')
    .data(pie(chartData))
    .enter().append('g')
    .attr('class', 'arc')
  
  g.append('path')
    .attr('d', arc)
    .style('fill', d => colorScale(d.data.name))
    .style('stroke', 'none')
    .transition()
    .ease(d3.easeLinear)
    .duration(1000)
    .attrTween('d', chartTween)
  
  // g.append('text')
  //   .transition()
  //   .ease(d3.easeLinear)
  //   .duration(1000)
  //   .attr('transform', d => `translate(${textArc.centroid(d)})`)
  //   .attr('dx', '-3em')
  //   .attr('dy', '.75em')
  //   .text(d => d.data.value)
  //   .attr('font-size', '20px')
  //   .attr('fill', '#fff')
  
  g.append('text')
    .html('Total Trades')
    .attr('text-anchor', 'middle')
    .attr('class', 'center-text')
    .attr('transform', d => 'translate(0, -10)')
    .attr('fill', '#fff')

  g.append('text')
    .html(totalTrades)
    .attr('text-anchor', 'middle')
    .attr('class', 'center-text')
    .attr('transform', d => 'translate(0, 10)')
    .attr('fill', '#FFFFFF')
  
  svg.append('g')
    .attr('class', 'legendLinear')
    .attr('transform', 'translate(70, 330)')
  
  const colorLegend = d3.legendColor()
    .orient('horizontal')
    .shapeWidth(60)
    .scale(colorScale)
  
  svg.select('.legendLinear')
    .call(colorLegend)
  
  // helper functions
  function chartTween(b) {
    b.innerRadius = 0
    const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, b)
    return function (t) { return arc(i(t)) }
  }
}