javascript - D3可以读取 "Geojson"文件吗？

Question

我刚刚从 geojson.io 下载了一个 Geojson 文件来映射我想要在 D3 中的特定区域。

但是，尽管有不同的方法，我还是无法绘制出这些特征。

首先，我认为可能文件格式 - geojson - 不正确，所以我转换为 json，但我仍然无法使用 D3 绘制特征。然后我将文件格式从 json 转换为 geo.json，但仍然无法在屏幕上显示 map 。

这是我的 geojson 示例:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Melbourne","postcode":3004,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.96743202209473,-37.817242738346984],[144.9671745300293,-37.817581756139454],[144.97138023376465,-37.83439508475046],[144.96726036071777,-37.83737769454491],[144.9712085723877,-37.83934343961261],[144.97035026550293,-37.846189246249814],[144.97678756713864,-37.84930692776673],[144.9785041809082,-37.85283110466397],[144.98296737670898,-37.85601627346177],[144.98399734497067,-37.85073017332982],[144.98459815979004,-37.845714804898066],[144.9799633026123,-37.84503702624343],[144.97756004333496,-37.837259070321736],[144.97620820999146,-37.83701758470656],[144.97631549835205,-37.836602397064034],[144.9765408039093,-37.83548392076778],[144.97558057308197,-37.83526361283155],[144.97554302215576,-37.83480181136876],[144.9785041809082,-37.83524242934148],[144.9787616729736,-37.833632466297274],[144.9833106994629,-37.83412393242583],[144.98502731323242,-37.82775156590534],[144.98811721801758,-37.828904055935546],[144.98923301696777,-37.82320922404997],[144.9752426147461,-37.815208598896234],[144.96743202209473,-37.817242738346984]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Melbourne","postcode":3000,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.9558448791504,-37.82276853421615],[144.967303276062,-37.81910731693811],[144.9671745300293,-37.81737834565081],[144.97481346130368,-37.8151746960972],[144.97112274169922,-37.80768179558675],[144.95957851409912,-37.80608818475805],[144.9600076675415,-37.80496924596681],[144.9584197998047,-37.80154450977393],[144.95713233947754,-37.80168014591059],[144.9574327468872,-37.800595049843196],[144.95661735534668,-37.80079850657008],[144.95571613311765,-37.80608818475805],[144.95532989501953,-37.80849554104369],[144.95635986328122,-37.811886050589756],[144.9512529373169,-37.81324221081575],[144.9558448791504,-37.82276853421615]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Southbank","postcode":3006,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.96726036071777,-37.81914121793108],[144.9558448791504,-37.82287023210366],[144.9532699584961,-37.82361601233024],[144.94837760925293,-37.82320922404997],[144.94773387908936,-37.82592110356655],[144.94691848754883,-37.827005827470494],[144.94919300079346,-37.83032769523887],[144.9528408050537,-37.828158329147854],[144.95404243469238,-37.83102255682819],[144.95453596115112,-37.83062428330308],[144.95479345321655,-37.83078528775296],[144.9553084373474,-37.8307768138433],[144.95657444000244,-37.83040396085496],[144.96288299560547,-37.82856509014813],[144.96575832366943,-37.831378459010416],[144.97035026550293,-37.830293799384194],[144.96726036071777,-37.81914121793108]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Docklands","postcode":3008,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.95121002197266,-37.81310659591412],[144.94511604309082,-37.81500518186842],[144.94357109069824,-37.81297098076338],[144.93756294250488,-37.80971614241526],[144.93352890014648,-37.80958052103703],[144.93404388427732,-37.81283536536353],[144.93078231811523,-37.815412015363556],[144.92425918579102,-37.81690371899756],[144.91825103759763,-37.81873440498776],[144.920654296875,-37.82097184843051],[144.9319839477539,-37.822056645079854],[144.933443069458,-37.822192243539966],[144.93696212768555,-37.82585330779315],[144.94717597961423,-37.82605669492651],[144.9477767944336,-37.82287023210366],[144.9529266357422,-37.823412618470364],[144.95550155639648,-37.82273463488917],[144.95121002197266,-37.81310659591412]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Seddon","postcode":3011,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.89966869354248,-37.81470005527579],[144.90559101104736,-37.81527640444762],[144.9093246459961,-37.80157841883145],[144.91232872009275,-37.799408207766895],[144.9148178100586,-37.800188134708165],[144.91627693176267,-37.79903519631872],[144.91636276245117,-37.797305754993076],[144.9143886566162,-37.79588147879352],[144.9098825454712,-37.79388066346596],[144.90554809570312,-37.79218501483793],[144.90365982055664,-37.79143891711323],[144.9023723602295,-37.790048442159254],[144.90262985229492,-37.78899709006653],[144.8938751220703,-37.78781006166096],[144.89035606384277,-37.78740307610388],[144.89031314849854,-37.78706391976077],[144.8833179473877,-37.78631777032694],[144.88142967224118,-37.79784832917946],[144.8798418045044,-37.7975770425844],[144.87941265106198,-37.80106978133416],[144.8869228363037,-37.801781872849624],[144.88529205322266,-37.8026635004523],[144.88409042358398,-37.809614426404934],[144.88687992095947,-37.8098517635444],[144.88962650299072,-37.81015691017421],[144.8899698257446,-37.80978395301097],[144.89447593688965,-37.81025862543725],[144.89816665649414,-37.81073329481208],[144.89820957183838,-37.81107234249728],[144.90112781524655,-37.81198776347078],[144.89966869354248,-37.81470005527579]]]}},

这是我的 javascript:

var width = 900;
var height = 500;

var svg = d3.select("body").append("svg")
var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);

d3.json("map.geo.json", function(err, geojson) {
      svg.append("path").attr("d", path(geojson));})

我正在使用 d3v3

当我使用 D3 时， map 数据应该绘制在屏幕上，但现在它什么也显示不了，而且上面也没有错误消息!

Answer 1

简短的回答是肯定的 - d3 可以加载和绘制 geojson 文件。 Geojson 是 json 的子集 - d3 路径采用表示地理特征的 geojson 对象并将它们转换为 SVG 或 Canvas 路径。由于 geojson 是 json 的子集，我们可以使用 d3.json 来加载我们的 geojson 文件。文件扩展名，无论是 .json、.geojson 还是 .geo.json 都无关紧要。

您的代码按预期加载并绘制了 geojson。问题出在别处。

问题是默认的 Mercator 项目参数将整个世界分布超过 960 像素(预期 960x500 像素的 map )。但是，默认的 svg 大小是 300 像素宽 x 150 像素高。本质上，您的 SVG 正在裁剪您的 map ，以便只有 map 的左上角可见(基本上是阿拉斯加和加拿大北部)。您的功能不在阿拉斯加或加拿大北部 - 它们在澳大利亚，因此它们不可见 - 如果您检查 SVG，您会看到这一点 - 您会看到这些功能超出了 SVG 边界的范围( example ) :

这解释了为什么没有错误:文件被加载并绘制了特征:刚好超出了 SVG 的范围。

一种解决方案是将 SVG 宽度和高度设置为默认投影参数所期望的范围:960x500(您有宽度和高度变量，但没有使用它们)。这将包括您的功能，但它们会非常小 - 毕竟 map 仍在显示世界 - 即使您的功能仅覆盖其中的一小部分。

缩放和居中 map 是现在的主要挑战。这部分之前已经回答过很多次了:你需要设置你的投影参数来显示感兴趣的区域。最简单的方法是使用 fitSize，但这只适用于 v4+:

 projection.fitSize([svgWidth,svgHeight],geojsonObject])

如 here 所示:

var width = 900;
var height = 500;

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

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

d3.json("geo.json", function(err, geojson) { 

      projection.fitSize([width,height],geojson); // adjust the projection to the features
      svg.append("path").attr("d", path(geojson)); // draw the features

})

如果您希望继续使用 v3，这个 question 应该有一些答案 - 以及 v4+ 的更多信息。