在我的数据中，我有一个列***“CountryCode”***，其中包含“US”，“DE”等值。
例如，我如何为所有交易过动物“鬣蜥”的国家着色（列：从我的理解来看，我应该将Map的国家代码与我的数据的国家代码进行比较，然后用不同的颜色突出显示与“鬣蜥”进行交易的所有国家。因此，我应该得到d3世界Map的国家代码。
这是我目前为止的代码：

const map = svg.append("g").attr("class", "map");

// create projection
const projection = d3.geoMercator();

// create path generator
const path = d3.geoPath().projection(projection);

d3.csv("./data/wild-life-trade-live.csv").then(function(data) {
// load data and render map
const colorScale = d3.scaleSequential()
    .domain(d3.extent(data, function(d) { return d.value; }))
    .interpolator(d3.interpolateBlues);
    
    d3.json("https://d3js.org/world-50m.v1.json").then(function(world) {
        // create map features
        map.selectAll("path")
        .data(topojson.feature(world, world.objects.countries).features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("fill", "lightgray")
        .attr("stroke", "white")
        .on("mouseover", function() {
            d3.select(this).attr("fill", "#D7B895");
        })
        .on("mouseout", function() {
            d3.select(this).attr("fill", "lightgray");
        })
        });
        
        const buttons = d3.select(".section-4")
            .append("div")
            .attr("class", "button-container")
            .selectAll("button")
            .data(["Iguana", "Pelicans", "Elephants", "Tigers"])
            .enter()
            .append("button")
            .text(d => d)
            .style("margin-right", "25px")
            .style("margin-left", "25px")
            .style("margin-top", "15px")
            .style("height", "30px")
            .style("width", "188px")
            .on("click", function() {
                const button = d3.select(this);
                const animal = button.text(); // Get the text of the clicked button
                const isClicked = button.classed("selected"); // Check if the button has "selected" class

                // Reset all buttons to default style
                buttons.style("background-color", "#D7B895")
                    .style("color", "black")
                    .classed("selected", false);

                if (!isClicked) {
                    // Apply selected style to clicked button
                    button.style("background-color", "white")
                        .style("color", "black")
                        .classed("selected", true);

                    // Update fill color of countries based on animal
                    map.selectAll("path")
                    .attr("fill", function(d) {
                        const countries = data.filter(function(row) {
                            return row.Genus.toLowerCase() === animal.toLowerCase() && 
                                (row.Importer === d.properties.id || row.Exporter === d.properties.id); //this doesn't work!
                        }).map(function(row) {
                            return row.CountryCode;
                        });
                
                        if (countries.length > 0) {
                            if (countries.includes(d.properties.id)) {
                                return "#D7B895";
                            } else {
                                return "lightgray";
                            }
                        } else {
                            return "lightgray";
                        }
                });
                svg.transition();
        }});`

我试过这个：

const countries = data.filter(function(row) {
      return row.Genus.toLowerCase() === animal.toLowerCase() && 
         (row.Importer === d.properties.id || row.Exporter === d.properties.id);

但这不起作用，因为d.properties.id是未定义的。我需要弄到这张Map的国家代码。