Question

我正在使用国家次区域的Nomenclature of Units for Territorial Statistics (NUTS)数据（即州/部门，行政区域小于国家但比城市大）。我从官方网站上把它们当作Shapefiles。

接下来，我使用以下命令将它们转换为GeoJSON：

ogr2ogr -f GeoJSON europe_admin_sub_units.json NUTS_RG_01M_2013.shp

现在我想做的是在浏览器中简单渲染它以了解它的外观。

我尝试过这个简单的脚本，但它不起作用：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 1160;

var projection = d3.geo.mercator()
    .scale(500)
    .translate([width / 2, height / 2]);

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

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

d3.json("data.json", function(error, uk) {
  svg.append("path")
      .attr("d", path);
});

</script>

但是，我不明白为什么它不起作用。

我的浏览器控制台没有错误。我正在使用Chrome。

Here是我正在使用的数据，实质上虽然看起来像这样：

{
    "type": "FeatureCollection",
    "features": [
    { "type": "Feature", "properties": { "NUTS_ID": "AT", "STAT_LEVL_": 0, "SHAPE_AREA": 10.0385472864, "SHAPE_LEN": 27.774664036600001 }, "geometry": { "type": "Polygon", "coordinates":

Answer 1

一些事情：

首先，您的GeoJSON文件很大。在浏览器中呈现此内容将非常缓慢。如果您只想查看生成的形状，这可能不是问题，但除此之外您还需要简化它。使用ogr2ogr -simplify很容易。

其次，路径是一个函数，因此您需要使用某些地理要素调用它来查看任何内容。

https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md

d3.json("data.json", function(error, uk) {
  svg.append("path")
      .attr("d", path(uk));
});

...会给你一些东西，但我不确定它是不是你要找的东西。

此外，如果您只想查看形状，可以使用QGIS（http://www.qgis.org/en/site/），它是免费的，非常适合预览和操作形状文件。

使用d3.js将NUTS数据渲染到浏览器中的地图

1 个答案: