map.get() 方法不适用于 D3 v6

Posted 2023-02-22

【中文标题】map.get() 方法不适用于 D3 v6

【英文标题】：map.get() method isn't working with D3 v6

【发布时间】：2022-01-09 03:01:25

【问题描述】：

我是 D3.js 的新手，我正在尝试用我的图表制作一些动画， 但我无法解决在 D3 版本 6 的 d3.map 上调用的 .get() 方法的问题。 当我运行代码时，它会引发错误：

nodeById.get 不是函数

我的代码基于：https://bl.ocks.org/ctufts/bd6956a45ea69734f5909c8b526c13b5

//some fetch data in json file
d3.json("someURLjsonfile").then(function (graph) 
        
let nodes = graph.nodes,
    nodeById = d3.map(nodes, function (d) 
      return d.id;
    ),
    links = graph.links,
    bilinks = [];
            

    links.forEach(function (link) 
    var  s = nodeById.get(link.source),  // <-- error
         t = nodeById.get(link.target),  // <-- error
         i = ; // intermediate node
         nodes.push(i);
         links.push(
                    source: s,
                    target: i
                , 
                    source: i,
                    target: t
                );
                bilinks.push([s, i, t]);
            );

【参考方案1】：

您的问题是由 API 的一些相当不幸的重新设计引起的。从 D3 v6 开始，d3-collection 模块已被弃用并从 D3 包中删除。该模块包含 d3.map() 构造函数方法，该方法将创建一个 d3.map 对象，即模仿原生 javascript Map 的 D3 内部映射实现之一。这种方法已经存在了一段时间，但在 ES6 功能可用后就失去了重要性，因此被删除了。

遗憾的是，d3-array 模块的第 2 版引入了一个同名的方法，它基本上等同于原生的 array.map() 或 Array.from() 方法：

#d3.ma​​p(iterable, mapper) · Source

返回一个新数组，其中包含 iterable 中的映射值，按给定 mapper 函数定义的顺序。等效于array.map 和Array.from：

自从d3-array v2 被引入到具有相同版本 6 的捆绑包中，也删除了 d3-collection，d3.map 属性仍然可用，但是它的含义已经改变。

您的代码似乎是为 D3 d3.map() 是映射器函数而不是构造函数；它返回一个不具有.get() 方法的数组，因此会出现错误。

要解决此问题，您可以将代码更改为直接使用内置的Map 对象：

nodeById = new Map(Array.from(nodes, d => [d.id, d]));

其余部分保持不变，您的代码应该按预期运行。