Javascript d3.geoPath（）。投影正在渲染黑色矩形而不是贴图

我想创建一个基于县数据的美国地图。我正在使用此JSON拓扑数据创建图形：

在第一步中，我创建了这样的地图，效果很好：

var path = d3.geoPath();

svgContainer.selectAll("path")
  .data(topojson.feature(countyData, countyData.objects.counties).features)
  .enter()
  .append("path")
  .attr("d", path)

然而，它对我来说太大了，所以我试着缩小它的尺寸。我尝试了

projections

，这是我在其他几个项目中看到的（例如这里：）。不幸的是，它只是渲染一个黑色矩形。我还尝试了geoAlbersUsa（）和其他一些投影，但没有效果。如何使地图数据按比例缩放

var projection = d3.geoAlbersUsa()  // geoMercator() also does not work
  .scale(200)
  .translate([width / 2, height / 2]);

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

svgContainer.selectAll("path")
  .data(topojson.feature(countyData, countyData.objects.counties).features)
  .enter()
  .append("path")
  .attr("d", path)

---

我做错了什么？

在第二段代码中（使用d3.geoAlbersUSA（））一切看起来都很好，只是我认为你用.scale（200）放大得太近了，只能看到一个县的中部。正如这篇文章所解释的，如果你用较小的比例值缩小，你可能会看到更多的地图。（） 您最好使用.fitSize（）而不是.scale，因为您似乎试图将整个topojson数据集放在一个区域内，而不是放大到其中的一部分。使用可变边距更新了下面的示例

var margin = 20; //amount of whitespace you want around the map
 var projection = d3.geoAlbersUsa()  
  .translate([width / 2, height / 2]);

var path = d3.geoPath().projection(projection);
var countiesFeatureCollection = topojson.feature(countyData, countyData.objects.counties);
//make the map projection fit into size of screen minus margin on all sides
projection.fitSize([width - margin*2, height - margin*2], countiesFeatureCollection);


svgContainer.selectAll("path")
  .data(countiesFeatureCollection.features)
  .enter()
  .append("path")
  .attr("d", path)

---

对于其他来到这里的人，此解决方案假设您至少使用D3V4，因为这是链接到的示例OP中的版本。fitSize（）在旧版本的D3.jsHello Katherine中不可用，非常感谢您的回复！它帮助我对投影的工作原理有了一些基本的了解。你是对的，它放大了太多，所以“矩形”实际上只显示了地图的一小部分。但是，您的建议仍然会得到相同的结果，并且使用较小的数字进行“缩放”。我想知道geoAlbersUsa（）-投影是否与提供的数据集不兼容。。？是否可以在没有定义投影方法的情况下进行缩放？或者有类似于“中性”投影的东西吗？countyData变量中的数据集可能与我在一个最小工作示例中使用的数据集格式不同。您可以在中比较投影文件和未投影文件的格式。我用一个文件测试了我的代码。谢谢！它与您的数据集完美配合！！