Question

我正在使用D3 JS库来显示地图。加载美国各州的地图工作正常，但如果我尝试加载各个州的县地图，则无法正常工作。我在所有状态下使用的文件位于https://raw.githubusercontent.com/d3/d3.github.com/master/us-10m.v1.json。我目前正在使用的状态图是https://raw.githubusercontent.com/deldersveld/topojson/master/countries/us-states/MI-26-michigan-counties.json，尽管其他状态具有相同的行为。

使用Chrome开发人员工具，我注意到状态（起作用的状态）使用一个“ path”元素和整个地图下面的一个“ d”元素呈现：

<h1>
  <a id="a"></a> *
  <a id="b"></a> = <input type="text" id="n1" name="txt"></h1>

<button onclick="fn1()" id="btn1">Clcik me</button>

<p id="p"></p>
<p id="pp"></p>
<p id="sum"></p>
<p id="test"></p>

各县渲染一个带有多个“路径”元素的“ g”元素：

<path d="M558.8236946374037,348.30360060633L559.3534721355569,348.2802219377176L567.3201262115587,347.9178525742255L571.2684679430778,347.7775805625511L572.0381446856777,347.7542018939387L577.0160540079474…

我用来渲染它们的D3代码是相同的，只是指向不同的数据源。这指向（工作）状态代码：

<g class="counties"><path d="M-86.2371554117112,44.517643343110294L-85.81834245759008,44.51265840274941L-85.82187674412275,44.16371257748768L-86.04276965241448,44.16620504766812L-86.38912973261591,44.178667398570326L-86.35201972402291,44.22851680217914L-86.26896399050521,44.344416665569646L-86.25305970110821,44.40049724462957L-86.24952541457554,44.48274876058412Z"></path><path d="M-84.13072063824123,42.42521462663013L-83.66596195919543,42.43144580208123L-83.55286479015007…

文件本身似乎具有相同的格式，（当然）具有不同的数据，所以我不知道为什么svg代码生成方式的巨大差异。我看到的两个区别是，美国状态文件中的状态文件缺少一个“ bbox”元素，而密歇根州的文件中的几何集合中包含了“属性”元素。

Answer 1

您遇到的问题与此one相反。美国topojson已经被投影（到960x600像素区域）-topojson中的基础坐标表示像素坐标。使用预先投影的地理特征的地图不使用d3地理投影。如果使用路径生成器进行绘制，则如下所示：

 var path = d3.geoPath(); // or
 var path = d3.geoPath().projection(null);

但是，密歇根州的数据包含纬度/经度对。如果将密歇根州的topojson转换为geojson（因此我们拥有人类可读的坐标），我们将获得诸如[-87.86292721673836,45.35386708864823]之类的值。如果我们使用空投影并将其视为像素值，则特征将在可见SVG的左侧，因为x值为负。因此，我们需要对路径进行预测：

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

我不确定您要使用哪种投影-预先投影的美国数据使用的是Albers投影，因此，如果我们要复制此和比例尺并在密歇根州中部，可以使用：< / p>

var projection = d3.geoAlbers()
   .fitSize([width,height],geojsonObject);   // width/height of SVG/canvas
var path = d3.geoPath().projection(projection);

对于Albers，它是为美国量身定制的，如果在世界其他地方使用fitSize或fitExtent，结果可能与预期不符，必须将投影旋转设置为考虑到不同的位置。

还有其他方法可用于对地图进行居中/缩放，但这在许多问题/答案中都涉及到。但是，要显示地理数据，您需要将其从球坐标投影到平面，任何d3 geoProjection都可以做到。

D3未在JSON文件中呈现地图数据

1 个答案: