d3.geoPath().projection 正在渲染黑色矩形而不是地图

Question

我想根据县数据创建美国地图。我正在使用此 JSON 拓扑数据来创建图表：https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json

在第一步中，我创建了这样的地图，它工作正常：

var path = d3.geoPath();

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

Picture: US map renders OK but too large

但是，它对于我的用途来说太大了，所以我正在尝试缩小它。我尝试了在其他几个项目中看到的 projections（例如这里：https://www.d3-graph-gallery.com/graph/choropleth_basic.html）。不幸的是，它只渲染了一个黑色矩形。我还尝试了 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)

Picture: projection renders black rectangle

我做错了什么？

Answer 1

第二个代码块（使用 d3.geoAlbersUSA()）中的一切看起来都不错，除了我认为您使用 .scale(200) 放大得太近并且只能看到一个县的中部。如本 post 中所述，如果您使用较小的比例值进行缩小，您可能会开始看到更多的地图。(What does it mean to scale a projection in d3?) 你可能最好使用 .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)

d3.geoPath().projection 正在渲染黑色矩形而不是地图

d3.geoPath().projection is rendering black rectangle instead of map

javascript

d3.js

choropleth