D3 v6使用d3.map调用get方法报错nodeById.get is not a function如何解决

你参考的示例代码基于D3 v5及更早版本编写，D3 v6对d3.map的API做了破坏性变更：

• v5及更早版本：d3.map(数组, 键提取函数) 返回D3自定义的Map结构，支持.get()、.set()等查询方法
• v6及后续版本：d3.map功能等价于原生数组的Array.map，仅用于遍历数组生成新数组，返回值为普通数组，没有.get()方法，因此会抛出nodeById.get is not a function错误。

有两种兼容D3 v6的修复方式，任选其一即可：

方案1：使用d3.index替换d3.map（推荐） #

d3.index是D3 v6新增的API，专门用于根据指定键生成映射结构，返回原生ES6 Map对象，完全兼容原有.get()调用逻辑，修改后的代码如下：

// 从json文件获取数据
d3.json("someURLjsonfile").then(function (graph) {
        
let nodes = graph.nodes,
    // 仅将原d3.map替换为d3.index即可
    nodeById = d3.index(nodes, function (d) {
      return d.id;
    }),
    links = graph.links,
    bilinks = [];
            

    links.forEach(function (link) {
    var  s = nodeById.get(link.source),
         t = nodeById.get(link.target),
         i = {}; // 中间节点
         nodes.push(i);
         links.push({
                    source: s,
                    target: i
                }, {
                    source: i,
                    target: t
                });
                bilinks.push([s, i, t]);
            });

方案2：使用原生JS手动构建Map #

如果不想依赖D3的专属API，也可以直接用原生ES6 Map构建映射，其余代码无需改动：

nodeById = new Map(nodes.map(d => [d.id, d]))

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