尝试使用d3.js并从Chrome中的网络服务器加载.json映射文件，没有错误，但未加载数据

如何解决尝试使用d3.js并从Chrome中的网络服务器加载.json映射文件，没有错误，但未加载数据

我是D3和JSON的新手，所以请多多包涵。我正在尝试学习如何显示地图，并没有遵循教程和示例代码（例如http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922，https://www.tutorialsteacher.com/d3js/loading-data-from-file-in-d3js）。我最终希望将数据绑定到地图，但是我目前仍无法显示地图文件。 Chrome没有给我任何错误，它只显示一个空白页和一个空控制台。

我按照 Web交互式数据可视化中的建议设置了自己的Web服务器，并按照指示将工作文件保存在“ www”文件夹中。

我知道在这个论坛上已经问过很多类似的问题，但是没有一个解决方案起作用。我尝试过：

将本地地图文件的位置移动到子文件夹之外。
指向服务器上地图文件的URL。

这是我的代码当前的样子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="utf-8">
        <title>D3: Applying a projection to SVG paths</title>
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <style type="text/css">
            path {
                stroke: white;
                stroke-width: 0.5px;
                fill: black;
            }   
        </style>
    </head>
    <body>

        //Sample text to see if anything is working.        
        <script type="text/javascript">
            d3.select("body").append("p").text("Making sure this works.");
        </script>
        
        //Code minimally adapted from Scott Murray's D3 book.
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 300;

            //Define map projection
            var projection = d3.geoAlbersUsa()
                               .translate([w/2,h/2]);

            //Define path generator
            var path = d3.geoPath()
                         .projection(projection)

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

            //Load in GeoJSON data
            d3.json("us-states.json",function(error,data) {
                if (error) return console.error(error);
                console.log(data);
                
                //Bind data and create one path per GeoJSON feature
                svg.selectAll(path)
                   .data(json.features)
                   .enter()
                   .append(path)
                   .attr("d",path)
                   .style("stroke","#fff")
                   .style("stroke-width","1")
                   .style("fill","steelblue");
                }
        
            );
            
        </script>
        
        //Sample text to see if anything is working.
        <script type="text/javascript">
            d3.select("body").append("p").text("And this too.");
        </script>
    </body>
</html>

Chrome会加载页面-我将示例文本放在代码中的几个地方，以确保它正在执行 something 并且那些看起来很好。但是，我要求将数据记录在控制台上，但是什么也没有。

我的代码可能还有其他问题，但是我怀疑此障碍与地图文件和Web服务器有关，因为我可以毫无问题地创建其他svg对象。感谢您的支持！