D3.js绘制纽约地图无显示问题求助

1. 投影选择完全错误 #

你用的d3.geoNaturalEarth1()是全球地图专用投影，用来渲染纽约这种小区域时，会把整个纽约缩成一个几乎看不见的点，这是空白的核心原因。

应该换成适合美国区域的投影，比如d3.geoAlbersUsa()，或者更灵活的方式：先获取GeoJSON的边界范围，再让投影自动适配SVG画布。

2. 缺少加载错误处理 #

D3 v4的d3.json如果加载失败（比如文件路径错、跨域、链接过期），不会主动提示错误，你根本不知道数据没加载进来。必须加上错误回调：

d3.json("newyork.geojson", function(error, data){
  if (error) throw error; // 抛出加载错误，便于排查
  // 后续渲染代码
})

3. 修复后的完整代码示例 #

下面是调整后的代码，解决了投影问题，加上了错误处理，并且让投影自动适配纽约区域：

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<svg id="my_dataviz" width="400" height="300"></svg>

<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// 改用适合美国区域的Albers投影
var projection = d3.geoAlbersUsa();

d3.json("newyork.geojson", function(error, data){
  if (error) throw error;

  // 让投影自动适配画布范围，留出10px边距
  projection.fitExtent([[10, 10], [width-10, height-10]], data);

  svg.append("g")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
      .attr("fill", "#69b3a2")
      .attr("d", d3.geoPath().projection(projection))
      .style("stroke", "#fff")
})
</script>

额外注意事项 #

• 确保newyork.geojson文件路径正确，本地直接打开HTML可能遇到跨域问题，建议用本地服务器（比如Python的python -m http.server）运行。
• 你提供的GeoJSON链接是带签名的临时链接，过期后会失效，最好下载文件到本地使用。

内容的提问来源于stack exchange，提问作者ssdn