d3 等值线图非常小

Question

我正在尝试从位于 here 的 topojson 文件绘制 svg 地图。当我运行下面的代码时，我看到一小块红色的 g 元素集合就是那个地图，但我不确定如何让它变大。我试过 projection.scale(100) 但这不起作用。

Here 是 fiddle.

<svg width=500 height=500></svg>

async function run() {
  const res = await fetch(
    "https://rawcdn.githack.com/jasonicarter/toronto-geojson/0fb40bd54333bc3d397a26cf4f68abb1b6d94188/toronto_topo.json"
  );
  const jsondata = await res.json();

  const width = 500;
  const height = 500;


  const neighbourhoods = topojson.feature(jsondata, jsondata.objects.toronto);
    
  const projection = d3.geoAlbers().translate([width / 2, height / 2])
    
  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");
    
  console.log("done")
}

run();

Answer 1

确实，您必须使用 scale 和 translate 属性来缩放/居中您的地图。但是 d3.geoProjection 还提供了一些方便的功能，例如 fitExtent and fitSize 以适应在一个特定的 GeoJSON 特征对象上的投影。

由于您的数据集包含许多特征，我建议使用 topojson.mesh 来获取代表整个数据集（作为网格）的唯一对象，以便将其范围与 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 元素上添加边框后）给出以下内容：

如果您想使用一些填充来适应范围（比如 20px），您可以使用以下内容：

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

d3 等值线图非常小

d3 choropleth map is extremely small

d3.js

topojson