地图未渲染，但数据正确

Question

我是新手，试图复制别人的 choropleth code 并使用我的数据。

我的数据与他们的数据结构匹配，我可以获得正确的数据 console.log() 并且我的工具提示显示正确的数据。

但是我的地图只是一大块没有路径的颜色。

这是一个codepen，但这是呈现地图特征的代码：

var path = d3.geo.path();

svg.append("g")
    .attr("class", "county")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function (d) {
      return color(pairFipsWithId[d.id]);
    })

结果如下所示：

Answer 1

⚠️这个问题和答案都使用 d3v3 - d3v4+ 地理路径略有不同，请参阅 for d3v4+。

如果您正在制作 D3 等值线，您应该寻找最新版本的 D3 - d3v3 现在有点过时了。然而，由于 v3 有一些差异，这并不是这个的重复，但问题是相同的：

您使用的示例地图包含未投影的地理数据
您的地理数据是投影的。

换句话说，您的示例的地理数据使用以纬度和经度度数测量的 3 维坐标系，而您的地理数据使用以像素为单位的坐标系。但是，您没有指定此更改，D3 也不知道如何更正它。

在 D3v3 中，d3.geo.path() 的默认投影是 d3.geo.albersUsa()，所有 D3 投影都假定您的数据以纬度和经度记录，否则我们需要为投影指定一个附加参数以指示输入数据使用的坐标 space。

如果您将 topojson 拖到 window 中，则表明您的数据已经投影的标志可能来自 mapshaper.org，您的地图是颠倒的。为什么？地理坐标随着向北（通常向上）移动而增加，而像素坐标随着向下移动而增加。这是您在 mapshaper.org:

中的数据

我们无法 "unproject" 数据，因为我们不知道使用什么投影来创建它。但是我们可以为 geo.path:

分配一个空投影

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

空投影只是获取数据中的每个坐标并将其转换为像素坐标而不进行任何变换 - 输入值被视为像素值。由于此地图是为网络地图设计的，因此不需要任何缩放或居中（取决于 SVG 的大小）。

这是更新后的 codepen。

在d3v4+中，geoPath的默认投影是空投影，它还附带了selection.raise()和selection.lower()方法，可以简化您的代码，以及将任何数据集拟合到给定大小的 SVG/Canvas 的更好选项。这是一个 d3v4 codePen 有一些修改，d3v5 需要更多的更新 d3.json

地图未渲染，但数据正确

Map not rendering, but data is correct

geojson

d3.js

topojson

choropleth