D3：GeoMapping 可视化——无法在 localHost 页面上获取任何内容

Question

我正在学习 Scott Murray 的 D3 书中的教程。我有以下 HTML / JS / D3 代码脚本来自本书：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Loading GeoJSON data and generating SVG paths</title>
        <script type="text/javascript" src="../d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

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

            //Define path generator, using the Albers USA projection
            var path = d3.geoPath()
                         .projection(d3.geoAlbersUsa());

            //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(json) {
                
                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path);
        
            });
            
        </script>
    </body>
</html>

我正在使用 D3 v5。当我刷新我的本地主机浏览器时，我什么也看不到。我确实有一个错误，但即使对于其他有效的代码块，该错误也始终存在。

对于这是为什么，有什么想法/建议吗？ ...以及如何修复它？

Answer 1

从 d3 v5 d3.json() 不再使用回调函数，而是需要一个 promise:
https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-50

D3：GeoMapping 可视化——无法在 localHost 页面上获取任何内容

D3: GeoMapping Visualization -- Can't get anything on localHost page

html

javascript

mapping

visualization

d3.js