如何在箭头函数中访问ES6 Map的键 实现D3数据正确绑定

问题原因 #

ST、FING确实是Map的键。
当你直接将Map实例传入D3的.data()方法时，D3会自动将Map解析为键值对数组，每个元素格式为[键名, 对应存储值]，你这个案例里解析后的数据为：
[ ["ST", Array(19)], ["FING", Array(27)] ]

你之前代码出错的原因是用了索引i取值：i为0时刚好取到第一个元素的键名ST，i为1时取到第二个元素的存储值（也就是数组），数组转为字符串就出现了你看到的一堆[object Object]的结果。

实现预期效果的修正代码 #

你只需要把id赋值的逻辑改成固定取每个键值对的第一个元素即可：

d3.select("#hubs").selectAll(".hub")
    .data(dataByHub) 
    .enter().append("g")
    .attr("class", "hub")
    .attr("id", d => d[0]) // 直接取键值对的第一个元素（键名）

运行后就能得到你预期的DOM结构。

附加问题解答 #

要访问对应键下的对象数组，直接取每个键值对的第二个元素d[1]即可。如果需要遍历数组使用对象值，可以继续在生成的.hub元素下嵌套绑定数据，示例如下：

d3.select("#hubs").selectAll(".hub")
    .data(dataByHub) 
    .enter().append("g")
    .attr("class", "hub")
    .attr("id", d => d[0])
    // 以下为遍历对应键下的对象数组、渲染子元素的示例
    .selectAll(".hub-item")
    .data(d => d[1]) // 绑定当前键对应的对象数组
    .enter().append("circle") // 示例用圆形渲染数组内的每个对象
    .attr("class", "hub-item")
    .attr("r", 5)
    .attr("cx", (d, i) => i * 10)
    .attr("cy", 10)
    .attr("fill", d => d.fillColor) // 直接使用数组内对象的属性值

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