使用 d3 绘制状态边界未按预期工作

Question

这是我的问题的example。最终，这将在其上绘制县/邮政编码信息。

我创建了一个投影和一个地理路径：

var projection = d3.geo.albersUsa()
  .scale(width * 1.3)
  .translate([width / 2, height / 2]);

var path = d3.geo.path().projection(projection);

但是，当我尝试添加状态边界时……会发生这种情况：

#state-borders {
    fill: none;
    stroke: #333;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}


svg.append('path')
  .datum(topojson.mesh(states, states.objects.states, function(a, b) { return a !== b; }))
.attr('id', 'state-borders')
.attr('d', path);

我查看了其他示例，它们似乎都在做类似的事情，我无法弄清楚我做错了什么。它几乎就像stroke-livejoin根本不工作。

Answer 1

您的地理数据已被预测；它不需要再次投影。投影在 3d 地球上获取未投影的点并将它们投影到 2d 空间，对已经是 2d 的数据执行此操作是行不通的。

您的数据不包含 3d 点（坐标空间以度为单位），而是包含 2d 点（坐标空间以像素为单位）。所以我们可以只使用恒等变换，因为不需要修改/投影/变换坐标。在 d3v4+ 中我们可以使用：

var path = d3.geoPath(); // default projection is an identity

但是对于 d3v3，地理路径的默认投影是 AlbersUsa。所以我们需要明确声明我们不需要投影：

var path = d3.geo.path().projection(null);

这给了我们一个有效的fiddle。

这个文件是预先投影的，这一点并不明显。通常，看起来像毛线球的地图是一个很好的指标，表明您正在投影已经投影的数据。

现在我们可能会遇到新问题，使用预投影几何体可能会使尺寸调整变得困难，在 d3v3 中更是如此 - 此文件适用于 960x600 视口。要根据地图的特征自动缩放和居中地图，请参阅quesion，其中一些答案适用于 d3 的 v3 (a,b)。但是使用您可以在 d3v4+ 中使用的 fitSize 方法会变得更容易，如answer 中所述。有关工作预投影几何的更多讨论，请参阅question。如果您打算在预投影几何体之上覆盖特征，您可能最好找到一个未投影的 US topo/geojson 来简化事情，正如 here 所讨论的那样。