图例没有出现，但是代码中没有错误（？）

Question

我想用我的3个类（a，b和c）创建一个图例，但是该图例没有出现在我的本地主机Webmap上。我找不到任何错误。这是我正在从事的作业：https://github.com/NieneB/webmapping_for_beginners_v2/wiki/D3-step-3

我试图将图例的代码移到另一个地方，但这似乎不起作用。我已经检查了代码，是否有任何;）}等。

    And these are some of my codes:

    <h1>Bigfoot Field Researchers Organizations</h1>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script> 
    //Width and height
    var w = 1000;
    var h = 800;

    //Create SVG
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

                // create a new SVG group element
                var layerWorld = svg.append('g');

                //Load in GeoJSON data
                var data = d3.json("world_simple.json", function(error, data){
                if (error) console.log(error);
                return data
                });

                // create a new SVG group element
                var layerYeti = svg.append('g');

                 //Load in GeoJSON data
                var yetiData = d3.json("All_BFRO_Reports_points.json", function (error, data) {
                    if (error) console.log(error);
                    return data
                });

Promise.all([data, yetiData]).then(function (values){
console.log(values[1])  
console.log(data)
//Bind data and create one path per GeoJSON feature
layerWorld.selectAll("path")
                .data(values[0].features)
                    .enter()
                    .append("path")
                    .attr("class", "countries")
                    .attr("d", path)
                    .style("fill", function(d){
                        return color(d.properties.pop_est)})
                    .style("stroke", "#5a5959")
                    .on("mouseover", handleMouseOver)
                    .on("mouseout", handleMouseOut);

                layerYeti.selectAll("circle")
                    .data(values[1].features)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d) {
                          //[0] returns the first coordinate (x) of the projected value
                          return projection(d.geometry.coordinates)[0];})
                    .attr("cy", function(d) {
                          //[1] returns the second coordinate (y) of the projected value
                          return projection(d.geometry.coordinates)[1];})
                    .attr("r", 2)
                    .style("fill", function(d){
                          if (d.properties.styleUrl == "#a") {return "red"}
                          else if (d.properties.styleUrl == "#b") {return "blue"}
                          else { return "yellow"}
                        })
                    .style("opacity", 0.75);

                    //Create Legend
                    var legend = d3.select("body")
                      .append("svg")
                      .attr("class", "legend")
                      .attr("width", 200)
                      .attr("height", 300);
                      })

                 var unique_values = d3.map(data.features, function(d){return d.properties.styleUrl;}).keys();
                console.log(unique_values);