代码之家 › 专栏 › 技术社区 › Giorgos Myrianthous

无法使用d3.js显示json映射

d3.js json html javascript

Giorgos Myrianthous · 技术社区 · 6 年前

我试图使用 d3.js 但是浏览器上什么也没有。

这个 JSON 文件包含以下内容:

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

我的html文件如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            var width = 960,
                height = 500;

            var projection = d3.geoEquirectangular()
                .center([-30, -17 ])
                .scale(3000)
                .rotate([-180,0]);

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            var path = d3.geoPath()
                .projection(projection);

            var g = svg.append("g");

            d3.json("https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CYP.geo.json", function (topology, error) {
                g.selectAll("path")
                    .data(topology.features)
                    .enter()
                    .append("path")
                    .attr("d", path);
            });
        </script>
    </body>
</html>

有没有想过我可能做错了什么?

1 回复 | 直到 6 年前

Pierre Capo 6 年前

你的体重和重心好像有问题。根据d3 geo api,有fitsize方法,它允许您轻松地将投影放置在容器中。

下面是一个片段(数据在其中硬编码):

var data ={  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

  
var width = 960,
height = 500;

var projection = d3.geoEquirectangular().fitSize([width, height], data); // adding fitSize method instead of center and scale.


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath()
    .projection(projection);

var g = svg.append("g");

    g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>