D3不在JSON文件中渲染地图数据

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”元素用于整个地图：

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

这些县呈现一个带有多个“路径”元素的“g”元素：

<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…

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

d3.json("us-10m.v1.json", function (error, us) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("d", path).append("svg:title");

文件本身似乎是相同的格式，当然（当然）不同的数据，所以我不知道为什么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投影，所以如果我们想复制这个并扩展密歇根中心，我们可以使用：

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

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

还有其他方法可用于居中/缩放地图，但许多问题/答案都涵盖了这一点。但是，要显示地理数据，您需要将其从球坐标投影到平面，任何d3 geoProjection都可以执行此操作。