地图未呈现，但数据正确

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 +的地理位置路径略有不同，请参见question/answer了解d3v4 +。

如果要制作D3弦，您应该寻找D3的最新版本-d3v3现在有点过时了。但是，由于v3有一些差异，因此这与question并不完全相同，但是问题是相同的：

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

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

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

如果您将topojson拖到地图倒置的窗口中，则表明已投影数据的迹象可能来自mapshaper.org。为什么？地理坐标随着人们向北移动（通常向上）而增加，而像素坐标随着人们向北移动而增加。这是您在mapshaper.org中的数据：

我们无法“取消投影”数据，因为我们不知道使用什么投影来创建数据。但是我们可以为geo.path分配一个空投影：

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

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

这是更新的codepen。

在d3v4 +中，geoPath的默认投影是无人值守的投影，它还带有selection.raise（）和selection.lower（）方法，它们可以稍微简化您的代码，以及将任何数据集拟合到给定大小的SVG /画布的更好的选择。这是经过一些修改的d3v4 codePen，d3v5在更新d3.json

时需要更多的操作