Javascript D3是否可以读取；Geojson“；文件夹？

我刚刚从下载了一个Geojson文件，用于映射我想要在D3中显示的特定区域

然而，尽管方法不同，我无法绘制这些特征

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

以下是我的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，但现在它不能显示任何东西，也没有它的错误信息

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

您的代码按预期加载和绘制geojson。相反，问题出在别处

问题是默认的墨卡托项目参数分布在960像素的范围内（预计为960x500像素的贴图）。但是，默认的svg大小是300像素宽乘以150像素高。基本上，SVG是对地图进行剪裁，以便只显示地图的左上角（基本上是阿拉斯加和加拿大北部）。您的功能不在阿拉斯加或加拿大北部-它们在澳大利亚，因此它们不可见-如果您检查SVG，您可以看到这一点-您将看到绘制的功能超出了SVG边界的范围（）：

这解释了为什么没有错误：加载了文件并绘制了功能：刚好超出了SVG的范围

一种解决方案是将SVG宽度和高度设置为默认投影参数960x500所期望的范围（您有宽度和高度变量，但不使用它们）。这将包括你的特征，但它们将非常小-毕竟地图仍然显示世界-即使你的特征只覆盖了它的一小部分

缩放地图并使其居中是目前的主要挑战。这一部分以前已经回答过很多次了：您需要设置投影参数以显示感兴趣的区域。最简单的方法是使用fitSize，但这仅适用于v4+：

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

如图所示：

---

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

下面是一个非常好的示例，可以帮助您实现目标：

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

})