перерисовать круги на карте в соответствии с выбором выпадающего меню в d3. js

Question

Я сделал карту с кружками, показывающими количество случаев Covid-19. Я создал раскрывающееся меню с опцией Подтверждено, Смерти, Восстановлено. Изображение, показывающее круги, основано на начальном случае, установленном для кругов на карте, которые соответствуют этому уравнению

radiusValue= d => d.properties['Confirmed'];

Здесь - это файл кода (индекс. js), содержащий раскрывающееся меню и карту.

import {
  select,
  geoPath,
  geoNaturalEarth1,
  zoom,
  geoCentroid,
  event,
  scaleOrdinal,
  schemeSpectral,
  scaleSqrt,
  max,
  format
} from 'd3';
import { loadAndProcessData } from './loadAndProcessData';
import { colorLegend } from './colorLegend';
import { sizeLegend } from './sizeLegend';
import { dropdownMenu } from './dropdownMenu';



const svg = select('svg');

const projection = geoNaturalEarth1();
const pathGenerator = geoPath().projection(projection);



const g = svg.append('g');

const colorLegendG = svg.append('g')
    .attr('transform', `translate(40,310)`);

g.append('path')
    .attr('class', 'sphere')
    .attr('d', pathGenerator({type: 'Sphere'}));

svg.call(zoom().on('zoom', () => {
  g.attr('transform', event.transform);
}));
let radiusValue;
const populationFormat=format(',');
let data;
let xColumn;
radiusValue= d => d.properties['Confirmed'];
console.log(radiusValue);
//  Deaths,Confirmed,Recovered

const onXColumnClicked=column=>{
       xColumn=column;

    if(xColumn==='Deaths')
    {
    radiusValue= d => d.properties['Deaths'];
        loadAndProcessData();
    }
    else if(xColumn==='Confirmed')
    {
    radiusValue= d => d.properties['Confirmed'];
        loadAndProcessData();
    }
    else if(xColumn==='Recovered')
    {
    radiusValue= d => d.properties['Recovered'];
        loadAndProcessData();
    }
    console.log(radiusValue);



     }     



loadAndProcessData().then(countries => {

        select('#menus').call(dropdownMenu,{
options:[countries.unData.columns[2],countries.unData.columns[3],countries.unData.columns[4]],
     onOptionClicked:onXColumnClicked
});  
// console.log(countries.unData.columns); 

  const sizeScale = scaleSqrt()
    .domain([0,max(countries.features,radiusValue)])
    .range([0,20]);

  g.append('g')
    .attr('transform', `translate(55,215)`)
    .call(sizeLegend, {
      sizeScale,
      spacing: 45,
      textOffset: 10,
      numTicks: 5,
      tickFormat:populationFormat
    }) 
  ;

  g.selectAll('path').data(countries.features)
    .enter().append('path')
      .attr('class', 'country')
      .attr('d', pathGenerator)
      .attr('fill', d => d.properties['Confirmed'] ? '#e8e8e8' :'#fecccc')
    .append('title')
      .text(d =>
            isNaN(radiusValue(d))
            ?"Missing Data"
            :[ d.properties['Country']
    ,populationFormat( radiusValue(d)) ].join(': ') );


  //radiusValue= d => d.properties[xColumn];
    //console.log(d =>d.properties[xColumn]);
   g.selectAll('circle').data(countries.featuresWithPopulation)
    .enter().append('circle')
      .attr('class', 'country-circle')
      .attr('cx',d=>projection(geoCentroid(d))[0])
      .attr('cy',d=>projection(geoCentroid(d))[1])
      .attr('r',d=>sizeScale(radiusValue(d)));

  //console.log(radiusValue);
});

Вот loadAndProcessData. js

import { feature } from 'topojson';
import { csv, json } from 'd3';
import { dropdownMenu } from './dropdownMenu';
import { index } from './index';

export const loadAndProcessData = () => 
  Promise
    .all([
      csv('data.csv'),
      json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
    ])
    .then(([unData, topoJSONdata]) => {


      const rowById = unData.reduce((accumulator, d) => {
        accumulator[d['Countrycode']] = d;
        return accumulator;
      }, {});


      const countries = feature(topoJSONdata, topoJSONdata.objects.countries);

      countries.features.forEach(d => {
        Object.assign(d.properties, rowById[+d.id]);
      });
      const featuresWithPopulation=countries.features
                                                    .filter(d=>d.properties['Deaths'])
                              .map(d=>{
                          d.properties['Deaths']=+d.properties['Deaths'];
                                 d.properties['Confirmed']=+d.properties['Confirmed'];
                                 d.properties['Recovered']=+d.properties['Recovered'];
                                   return d;
                              }); 
     //console.log(countries);
      return {
        features:countries.features,
        featuresWithPopulation,
        unData
             };
    });

Параметр раскрывающегося меню не производят изменения кружков на карте. Как произвести изменение кружков на карте с помощью опции выпадающего меню? Вот ссылка vizhub на код