Question

我试图在d3中加载此map。我直接复制了代码并从here获取了数据并将其保存到名为countries.json的文件中，但是当我启动本地服务器时出现以下错误：

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;未定义的在绑定（d3.v3.js：842）在Array.d3_selectionPrototype.data（d3.v3.js：900）在对象。（map.html：86）在Object.event（d3.v3.js：504）在XMLHttpRequest.respond（d3.v3.js：1946）

为什么我收到此错误？

这是代码

   <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Mercator projection</title>
            <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script src="//d3js.org/topojson.v1.min.js"></script>
            <style type="text/css">


                svg {
                    background-color: white;
                }

                h1 {
                    color: rgb(115, 115, 115);
                    font-size: 18px;
                    font-family: sans-serif;
                    font-weight: bold;
                    margin: 0;
                    padding-bottom: 10px;

                }

                    #container {
                    width: 800px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 20px;
                    padding: 20px;
                    background-color: white;
                    box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
                }

                path:hover {
                    fill: rgba(8, 81, 156, 0.2);
                    cursor:pointer;
                }



            </style>
        </head>
        <body>


        <div id="container">
            <h1>World map centered on European countries</h1>

        </div>


            <script type="text/javascript">



                //Width and height
                var w = 800;
                var h = 600;

                //Define map projection


                var projection = d3.geo.mercator()
                                       .center([ 13, 52 ])
                                       .translate([ w/2, h/2 ])
                                       .scale([ w/1.5 ]);

                //Define path generator
                var path = d3.geo.path()
                                 .projection(projection);


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

                //Load in GeoJSON data
                d3.json("countries.json", function(error,collection) {
                    if(error) throw error;

                    //Bind data and create one path per GeoJSON feature
                    svg.selectAll("path")
                       .data(collection.features)
                       .enter()
                       .append("path")
                       .attr("d", path)
                       .attr("stroke", "rgba(8, 81, 156, 0.2)")
                       .attr("fill", "rgba(8, 81, 156, 0.6)");

                });



            </script>
        </body>
    </html>

加载d3映射错误

0 个答案: