D3分级统计地图替换纽约州TopoJSON后报counties未定义如何解决

问题根源 #

报错确实是两个TopoJSON结构差异导致的，核心问题如下：

• 你使用的纽约州TopoJSON文件的objects字段下不存在counties属性，原有us.objects.counties读取失败，导致counties变量未完成赋值，后续调用时抛出未定义错误
• 该文件objects下也不存在原有代码调用的states属性，后续绘制州边界的代码也会报错
• 原有适配美国全域的默认投影会导致纽约州显示过小、位置偏移

具体修改步骤 #

1. 补充纽约州适配的投影配置 #

找到原有定义path的代码：

var path = d3.geoPath();

替换为：

var projection = d3.geoConicEqualArea()
  .rotate([76.5, 0])
  .center([0, 42.5])
  .parallels([40, 45])
  .scale(8500)
  .translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projection);

2. 修改县要素读取逻辑 #

找到问题行：

.data(topojson.feature(us, us.objects.counties).features)

替换为：

.data(topojson.feature(us, us.objects['NY-36-new-york-counties']).features)

3. 修改县边界绘制逻辑 #

找到原有绘制州边界的代码：

.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))

替换为：

.datum(topojson.mesh(us, us.objects['NY-36-new-york-counties'], (a, b) => a !== b))

可选优化 #

给counties变量添加声明，避免全局变量污染：

// 原来的写法
counties = svg.append("g")
// 修改为
var counties = svg.append("g")

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