D3.js d3 choropleth地图非常小

我正在尝试从位于的topojson文件中绘制svg映射。当我运行下面的代码时，我看到一个红色的

g

元素的小集合，这就是地图，但我不知道如何将其放大。我试过做

projection.scale（100）

，但不起作用

这是一把小提琴

异步函数运行（）{
const res=等待取数(
"https://rawcdn.githack.com/jasonicarter/toronto-geojson/0fb40bd54333bc3d397a26cf4f68abb1b6d94188/toronto_topo.json"
);
const jsondata=await res.json（）；
常数宽度=500；
常数高度=500；
const neighborients=topojson.feature（jsondata，jsondata.objects.toronto）；
常量投影=d3.geoAlbers（）.translate（[width/2，height/2]）
const svg=d3.选择（“svg”）
svg
.附加（“g”）
.selectAll（“路径”）
.数据（邻里关系.特征）
.输入（）
.append（“路径”）
.attr（“d”，d3.geoPath（）.projection（projection））
.attr（“填充”、“红色”）
.attr（“笔划”、“白色”）；
控制台日志（“完成”）
}
run（）；

事实上，您必须使用

缩放

和

平移

属性来缩放/居中地图。 但是，

d3.geoProjection

还提供了一些方便的功能，例如和，以便适合一个特定GeoJSON要素对象上的投影

由于您的数据集包含许多功能，我建议使用以获取表示整个数据集（作为网格）的唯一对象，并使用投影的

fitSize

方法来缩放地图：

const neighbourhoods = topojson.feature(jsondata, jsondata.objects.toronto);
const mesh = topojson.mesh(jsondata, jsondata.objects.toronto);

const projection = d3.geoAlbers()
  .fitSize([width, height], mesh);
    
const svg = d3.select("svg")

svg
  .append('g')
  .selectAll("path")
  .data(neighbourhoods.features)
  .enter()
  .append("path")
  .attr("d", d3.geoPath().projection(projection))
  .attr("fill", "red")
  .attr("stroke", "white");

其中（在svg元素上添加边框后）给出以下内容：

const projection = d3.geoAlbers()
  .fitExtent([[20, 20], [width - 20, height - 20]], mesh);

如果您想使用一些填充（比如20px）来适应数据块，您可以使用以下方法：

const projection = d3.geoAlbers()
  .fitExtent([[20, 20], [width - 20, height - 20]], mesh);