尝试使用D3创建地图，但它没有显示出来

Question

我正在尝试使用d3绘制亚洲地图。我按照本教程结束了以下示例：http://maptimeboston.github.io/d3-maptime/example3/index.html

所以我决定尝试将这个例子用于我的目的。我从这里得到了亚洲数据：https://github.com/codeforamerica/click_that_hood/blob/master/public/data/asia.geojson

所以我的neighborhoods.js代码现在看起来像这样（不包括整个文件）：

var neighborhoods_json = {


    "type": "FeatureCollection",
    "features": [{
          "type": "Feature",
          "properties": {
            "name": "Cyprus",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 27
          },
          "geometry": {
            "type": "MultiPolygon",
            "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]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "Georgia",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 75
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [41.554084, 41.535656],
                  [41.703171, 41.962943],
                  [41.45347, 42.645123],
                  [40.875469, 43.013628],
                  [40.321394, 43.128634],
                  [39.955009, 43.434998],
                  [40.076965, 43.553104],
                  [40.922185, 43.382159],
                  [42.394395, 43.220308],
                  [43.756017, 42.740828],
                  [43.9312, 42.554974],
                  [44.537623, 42.711993],
                  [45.470279, 42.502781],
                  [45.77641, 42.092444],
                  [46.404951, 41.860675],
                  [46.145432, 41.722802],
                  [46.637908, 41.181673],
                  [46.501637, 41.064445],
                  [45.962601, 41.123873],
                  [45.217426, 41.411452],
                  [44.97248, 41.248129],
                  [43.582746, 41.092143],
                  [42.619549, 41.583173],
                  [41.554084, 41.535656]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "Nepal",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 121
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [88.120441, 27.876542],
                  [88.043133, 27.445819],
                  [88.174804, 26.810405],
                  [88.060238, 26.414615],
                  [87.227472, 26.397898],
                  [86.024393, 26.630985],
                  [85.251779, 26.726198],
                  [84.675018, 27.234901],
                  [83.304249, 27.364506],
                  [81.999987, 27.925479],
                  [81.057203, 28.416095],
                  [80.088425, 28.79447],
                  [80.476721, 29.729865],
                  [81.111256, 30.183481],
                  [81.525804, 30.422717],
                  [82.327513, 30.115268],
                  [83.337115, 29.463732],
                  [83.898993, 29.320226],
                  [84.23458, 28.839894],
                  [85.011638, 28.642774],
                  [85.82332, 28.203576],
                  [86.954517, 27.974262],
                  [88.120441, 27.876542]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "Palestine",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 4
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [35.545665, 32.393992],
                  [35.545252, 31.782505],
                  [35.397561, 31.489086],
                  [34.927408, 31.353435],
                  [34.970507, 31.616778],
                  [35.225892, 31.754341],
                  [34.974641, 31.866582],
                  [35.18393, 32.532511],
                  [35.545665, 32.393992]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "Qatar",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 13
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [50.810108, 24.754743],
                  [50.743911, 25.482424],
                  [51.013352, 26.006992],
                  [51.286462, 26.114582],
                  [51.589079, 25.801113],
                  [51.6067, 25.21567],
                  [51.389608, 24.627386],
                  [51.112415, 24.556331],
                  [50.810108, 24.754743]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "South Korea (Republic of Korea)",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-29T19:58:09+0100",
            "cartodb_id": 102
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [128.349716, 38.612243],
                  [129.21292, 37.432392],
                  [129.46045, 36.784189],
                  [129.468304, 35.632141],
                  [129.091377, 35.082484],
                  [128.18585, 34.890377],
                  [127.386519, 34.475674],
                  [126.485748, 34.390046],
                  [126.37392, 34.93456],
                  [126.559231, 35.684541],
                  [126.117398, 36.725485],
                  [126.860143, 36.893924],
                  [126.174759, 37.749686],
                  [126.237339, 37.840378],
                  [126.68372, 37.804773],
                  [127.073309, 38.256115],
                  [127.780035, 38.304536],
                  [128.205746, 38.370397],
                  [128.349716, 38.612243]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "Sri Lanka",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 108
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [81.787959, 7.523055],
                  [81.637322, 6.481775],
                  [81.21802, 6.197141],
                  [80.348357, 5.96837],
                  [79.872469, 6.763463],
                  [79.695167, 8.200843],
                  [80.147801, 9.824078],
                  [80.838818, 9.268427],
                  [81.304319, 8.564206],
                  [81.787959, 7.523055]
                ]
              ]
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
            "name": "Afghanistan",
            "created_at": "2013-12-04T08:41:11+0100",
            "updated_at": "2013-12-04T08:41:12+0100",
            "cartodb_id": 16
          },
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [61.210817, 35.650072],
                  [62.230651, 35.270664],
                  [62.984662, 35.404041],
                  [63.193538, 35.857166],
                  [63.982896, 36.007957],
                  [64.546479, 36.312073],
                  [64.746105, 37.111818],
                  [65.588948, 37.305217],
                  [65.745631, 37.661164],
                  [66.217385, 37.39379],
                  [66.518607, 37.362784],
                  [67.075782, 37.356144],
                  [67.83, 37.144994],
                  [68.135562, 37.023115],
                  [68.859446, 37.344336],
                  [69.196273, 37.151144],
                  [69.518785, 37.608997],
                  [70.116578, 37.588223],
                  [70.270574, 37.735165],
                  [70.376304, 38.138396],
                  [70.806821, 38.486282],
                  [71.348131, 38.258905],
                  [71.239404, 37.953265],
                  [71.541918, 37.905774],
                  [71.448693, 37.065645],
                  [71.844638, 36.738171],
                  [72.193041, 36.948288],
                  [72.63689, 37.047558],
                  [73.260056, 37.495257],
                  [73.948696, 37.421566],
                  [74.980002, 37.41999],
                  [75.158028, 37.133031],
                  [74.575893, 37.020841],
                  [74.067552, 36.836176],
                  [72.920025, 36.720007],
                  [71.846292, 36.509942],
                  [71.262348, 36.074388],
                  [71.498768, 35.650563],
                  [71.613076, 35.153203],
                  [71.115019, 34.733126],
                  [71.156773, 34.348911],
                  [70.881803, 33.988856],
                  [69.930543, 34.02012],
                  [70.323594, 33.358533],
                  [69.687147, 33.105499],
                  [69.262522, 32.501944],
                  [69.317764, 31.901412],
                  [68.926677, 31.620189],
                  [68.556932, 31.71331],
                  [67.792689, 31.58293],
                  [67.683394, 31.303154],
                  [66.938891, 31.304911],
                  [66.381458, 30.738899],
                  [66.346473, 29.887943],
                  [65.046862, 29.472181],
                  [64.350419, 29.560031],
                  [64.148002, 29.340819],
                  [63.550261, 29.468331],
                  [62.549857, 29.318572],
                  [60.874248, 29.829239],
                  [61.781222, 30.73585],
                  [61.699314, 31.379506],
                  [60.941945, 31.548075],
                  [60.863655, 32.18292],
                  [60.536078, 32.981269],
                  [60.9637, 33.528832],
                  [60.52843, 33.676446],
                  [60.803193, 34.404102],
                  [61.210817, 35.650072]
                ]
              ]
            ]
          }
        }

我没有更改原始的html文件，如下所示：

<html>

<head>
  <title>A D3 map</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="neighborhoods.js"></script>
</head>

<body>
  <script>
    var width = 2000,
      height = 2000;

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

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

    var albersProjection = d3.geo.albers()
      .scale(190000)
      .rotate([71.057, 0])
      .center([0, 42.313])
      .translate([width / 2, height / 2]);

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

    g.selectAll("path")
      .data(neighborhoods_json.features)
      .enter()
      .append("path")
      .attr("fill", "#ccc")
      .attr("d", geoPath);
  </script>
</body>

</html>

所以我的问题是：

我不知道哪里出了问题。当我检查页面时，它清楚地显示正在创建路径，它们只是没有显示）：

有没有人知道我做错了什么愚蠢的事。

Answer 1

您的地图正在按预期绘制。

让我们看一下投影：

var albersProjection = d3.geo.albers()
  .scale(190000)
  .rotate([71.057, 0])
  .center([0, 42.313])
  .translate([width / 2, height / 2]);

这是一个Albers投影，它以[-71.057,42.313]（经度和纬度分别为中心）为中心，这是波士顿（我相信你的例子）。比例因子是巨大的，这意味着它被放大（大约200左右的值可能显示整个世界），所以它可能只显示波士顿周围的区域。

您的数据在亚洲 - 包括韩国和卡塔尔等功能。使用此投影将无法看到这些特征（正如您所说，如果您检查svg，您将看到绘制的特征，只是奇怪的坐标超出了svg的边缘）。

您需要更新投影以显示您关注的区域。如果你想保留Albers投影，那么你也应该设置相似之处（默认情况下它们最适合美国）。

我使用以下投影测试了您的数据：

var albersProjection = d3.geo.albers()
  .scale(600)
  .rotate([-65, 0])
  .center([0, 33])
  .translate([width / 2, height / 2]);

（我还将宽度和高度更改为1000，因此它更适合我的屏幕）。 此投影以[65,33]（经度，纬度）为中心。

这给了我：

我对x轴使用了负旋转值，因为我在地球下旋转地球，而不是旋转我的视点。

我只是关注列表中的国家并试图找到谷歌地球的中心点，你可以做得更好，甚至以编程方式找到中心。

我没有设置相似之处，但要这样做，找到两个与您感兴趣的区域相交的平行线，并使用它们进行设置：

projection.parallels([a,b])

可以找到更详细的albers投影参数和d3检查in this answer。

如果您不确定您的功能相对于您的svg的位置，请尝试缩小，较低的缩放值将显示更多的地球，并希望显示隐藏的功能所在的位置（这可以帮助缩小缺少功能时的问题。）