D3为geojson添加路径但不添加topojson

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3为geojson添加路径但不添加topojson相关的知识,希望对你有一定的参考价值。

我正在尝试使用D3显示地图。我有一个geoJSON文件和topoJSON文件相同的地图。当我加载geoJSON文件时,它会在页面上呈现,而<path>标记会被d=...填充。但是当我更改url以获取topoJSON文件时,<path>标记仍为空,即使我将其余代码保持不变。 svg仍然使用topoJSON请求呈现,但没有任何内容出现。有关可能发生的事情的任何想法?

我的代码:

var width = 550;
var height = 570;

var arizonaProjection = d3.geoMercator()
  .center([-111.6602, 34.2744])
  .scale(4500)
  .translate([width/2, height/2]);

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

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

d3.json("geojson/Arizona.geojson", function(error, Arizona) {
  svg.append("path")
    .attr("d", path(Arizona));
  console.log(path);
});

文件geojson/Arizona.geojson存储在我本地服务器的不同目录中,topojson/Arizona.json中的topojson文件也是如此。

topoJSON的示例:

"transform":{
  "scale":[0.00003998538143372804,0.000031941344085415994],
  "translate":[-114.81659,31.33218]
},
"objects":{
  "Arizona_88_to_89":{
    "type":"GeometryCollection",
    "geometries":[
      {
      "arcs":[[0,1,2,3,4,5]],
      "type":"Polygon",
      "properties":{
        "startcong":"88",
        "district":"1",
        "statename":"Arizona",
        "member":{
          "88":{"7845":{"party":"Republican","name":"Rhodes, John Jacob","district":"1"}},
      "89":{"7845":{"party":"Republican","name":"Rhodes, John Jacob","district":"1"}}
    },
    "endcong":"89",
    "id":"004088089001"
  }
    },{
      "arcs":[[6,-5,7,-3,8,-1,9,10,11,12]],
      "type":"Polygon",
      "properties":{
        "startcong":"88",
        "district":"2",
        "statename":"Arizona",
        "member":{
          "88":{"10566":{"party":"Democrat","name":"Udall, Morris K.","district":"2"}},
          "89":{"10566":{"party":"Democrat","name":"Udall, Morris K.","district":"2"}}
        },
        "endcong":"89",
        "id":"004088089002"
      }
    },{
      "arcs":[[-12,13,-10,-6,-7,14]],
      "type":"Polygon",
      "properties":{
        "startcong":"88",
        "district":"3",
        "statename":"Arizona",
        "member":{
          "88":{"10623":{"party":"Democrat","name":"Senner, Georg F., Jr.","district":"3"}},
          "89":{"10623":{"party":"Democrat","name":"Senner, Georg F., Jr.","district":"3"}}
        },
        "endcong":"89",
        "id":"004088089003"
      }
    }
    ]

}

geoJSON的示例:

{"type": "FeatureCollection", "features": [{"geometry": {"type": "MultiPolygon", "coordinates": [[[[-112.75515, 33.99991], [-112.75073, 33.99984], [-112.75034, 33.99992], [-112.74655, 33.99991], [-112.74509, 33.9999], [-112.7442, 33.9999], [-112.74395, 33.9999], [-112.74346, 33.99977], [-112.74331, 33.99973], [-112.74262, 33.99955],
答案

d3 geopath采用geojson对象,而不是拓扑/ topojson对象。要将topojson与d3 geoPath一起使用,必须先将其转换回geojson。你可以用topojson.js很容易地做到这一点:

var featureCollection = topojson.feature(Arizona, Arizona.objects.counties)

当然,你可以将这些功能作为一个数组来实现:

var features = topojson.feature(Arizona, Arizona.objects.counties).features

以上假设topology.objects包含县的财产,你必须看看你的topojson,看看县是否正确(我猜你可能会显示县)。如果您使用了mapshaper.org之类的工具,则属性名称可能与原始文件名相同。

以上是关于D3为geojson添加路径但不添加topojson的主要内容,如果未能解决你的问题,请参考以下文章

d3.js 地图:使用 geojson 文件和 CSV 数据

在 Plotly Density_Mapbox 上添加 GeoJSON 等高线作为图层

D3.js 绘制geojson不正确

给定 geoJSON 对象,在 d3 中将地图居中

使用 Javascript 将 GeoJSON 转换为 SVG

班加罗尔geojson地图与d3 js