d3.js - 改编规范示例时，我的 topojson 不会显示

Question

我开始研究 D3，以便创建一个按年份筛选的等值线图/热图。

问题:

我想显示这个 topojson文件。我尝试改编 Mike Bostock 的 topojson 示例 here .但是，当我为我的 topojson 调整示例时，控制台中没有任何显示，也没有显示任何错误。

我的代码是这样的:

var svg = d3.select("svg");
var path = d3.geoPath();
d3.json("aisp.topojson", function(error, aisp) {
  if (error) throw error;

svg.append("g")
  .attr("class", "states")
.selectAll("path")
 .data(topojson.feature(aisp, aisp.objects.convert).features)
.enter().append("path")
.attr("d", path);


svg.append("path")
  .attr("class", "state-borders")
  .attr("d", path(topojson.mesh(aisp, aisp.objects.convert, function(a, b) { return a !== b; })));
}); 

Answer 1

问题

使用此 block 作为示例可能会有问题，因为它不使用投影。该示例使用一个预投影的 topojson，其坐标在像素坐标空间中 - 它旨在显示在 900 x 600 像素窗口上，输入文件中的坐标值范围在 [0,0] 和 [0,0] 的边界框内[900,600]。因此，该示例不使用地理投影。

地理坐标不会完全落在这个范围内。

为什么什么都不画？

与示例不同，您的 topojson 特征包含地理坐标 - 纬度和经度。

要在 d3 或任何其他框架或程序中投影地理特征，必须应用投影将三维坐标空间中的地理坐标转换为适合在二维 svg 或 Canvas 网格上显示的平面笛卡尔坐标。

您没有对特征应用必要的投影。当您使用 geoPath 时，您通常需要指定一个 geoProjection:

var path = d3.geoPath().projection(d3.geoProjection)

但是，您不使用投影，因此 d3 默认为空投影。对于您的 topojson/geojson 中的每个坐标，输入的 x 和 y 值被视为像素坐标，不进行转换/平移/缩放。

由于您的要素位于西半球，因此 x(经度)值为负。具有负 x 值的像素位于屏幕左侧。

南半球的值为负值，因此它们也会被绘制出屏幕。在这种情况下，在 svg 或 Canvas 上方 - 因为 y 值从屏幕顶部的零开始，并随着向下移动而增加。

最后，如果您在地球的东北象限中有任何要素，它们将显示为它们的坐标为正(假设您的 svg 为 90 像素高和 180 像素宽)。但是，它们会颠倒过来，因为 y 值会随着 map “向上”移动而增加，但在 svg/canvas 坐标空间中，它们会随着 map “向上”移动而减小。

解决问题

您将需要使用投影。最基本的设置可能是使用像墨卡托这样的简单投影，并使用 fitSize 或 fitExtent 自动缩放和居中要显示的功能。为此，您可以使用类似的东西:

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

// once topojson is loaded:
projection.fitSize([width,height],geojson object);

如何获取 geojson？你已经是:

topojson.feature(aisp, aisp.objects.convert)  // convert topojson to geojson.

您需要传递 geojson 对象，而不是它包含的特征数组，因此我们不使用 topojson.feature(aisp, aisp.objects.convert).features使用 .fitSize。

FitSize 获取宽度和高度并设置投影的比例并转换为适当的值。 FitExtent 用两个点标记特征边界框的左上角和右下角:projection.fitExtent([[x1,y1],[x2,y2]],geojson);

这种方法没有设置更复杂的投影参数，例如旋转或圆锥投影，例如阿尔伯斯、平行线，但在许多情况下就足够了。

例子

Here's带有 fitSize 的 map 示例(我更改了文件名)。