如何在d3.js的.data()方法中使用变量动态指定对象属性

你遇到的是JavaScript对象动态属性访问的基础语法问题，和D3.js、TopoJSON本身无关。

之前写法的错误原因 #

• 第一种topology.objects.CODEHERE是点表示法访问对象属性，会直接查找对象上名为CODEHERE的固定属性，不会解析你定义的同名变量，自然无法匹配到目标地理数据。
• 第二种在点号后直接拼接变量的写法不符合JavaScript语法规则，会直接抛出语法错误。

正确实现方式 #

JavaScript中如果需要用变量动态指定访问的对象属性，必须使用方括号表示法替代点表示法，代码示例如下：

// 可根据业务需求动态给该变量赋值，支持从接口返回、用户选择、路由参数等任意来源取值
const mapCode = "MU3303906MU";

G
  .selectAll("path")
  // 方括号包裹变量即可动态读取对应属性
  .data(topojson.feature(topology, topology.objects[mapCode]).features)
  .join("path")
  .attr("class", "state-county")

补充说明：当访问固定属性名时，点表示法和方括号表示法效果完全一致，比如topology.objects.MU3303906MU和topology.objects["MU3303906MU"]运行结果没有区别，仅当属性名需要通过变量、表达式动态生成时，必须使用方括号写法。

内容的提问来源于stack exchange，提问作者Aloysia de Argenteuil