Estoy usando el mapa d3 svg y tengo 2 datos, uno para el mapa y otro mis datos personalizados para trazar los puntos de datos en el mapa. Estos son los datos del mapa const mapDataUrl = 'https://d3js.org/world-50m.v1.json' Quiero colorear el país que tiene el punto de datos en mis datos personalizados.

A continuación se muestra la parte de muestra de mis datos personalizados para trazar los puntos de datos, como aquí, el país es EE. UU., por lo que quiero llenar de color EE. UU.

 "features": [ { "properties": { "ip": "8.8.8.8", "loc":"37.4056, -122.0775", "name": "US", "country": "US", "reclong": "-122.0775", "year": "1880-01-01T00:00:00.000", "id": "1", "reclat": "37.4056" } } ]

Este es mi código para trazar el mapa y los puntos de datos en él.

 // load map data d3.json(mapDataUrl, mapData => { const countries = topojson.feature(mapData, mapData.objects.countries).features g.selectAll('.country') .data(countries) .enter().append('path') .attr('class', 'country') .attr('d', path) .on('mouseover', function (d) { d3.select(this).classed('hovered', true) }) .on('mouseout', function (d) { d3.select(this).classed('hovered', false) }) .on('click', clicked) // load ip data d3.json(dataUrl, data => { const colorScale = d3.scaleOrdinal(d3.schemeBlues[2000]); g.selectAll('.meteor') .data(data.features) .enter().append('circle') .attr('class', 'meteor') .attr('r', d => calcRad(20000)) .attr('fill', d => 'blue') .attr('cx', d => projection([d.properties.loc.split(', ')[1], d.properties.loc.split(', ')[0]])[0]) .attr('cy', d => projection([d.properties.loc.split(', ')[1], d.properties.loc.split(', ')[0]])[1]) .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) }) })

¿Cómo hago esto, llenando el color con el país que está en mis datos personalizados?
Gracias por la ayuda.