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

Question

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

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]);
            });

Answer 1

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

\n

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

\n

\n

# d3. 映射（可迭代，映射器）\xc2\xb7源

\n

按照给定映射器函数的定义，按顺序返回包含来自iterable的映射值的新数组。等价于array.map和Array.from：

\n

\n

由于d3-array v2被引入到具有相同版本 6 的捆绑包中，该版本也删除了d3-collection该d3.map属性，但该属性仍然可用，但其含义已发生变化。

\n

您的代码似乎是为 D3 <v6 编写的，并且由于上面列出的更改而中断。newd3.map()是映射器函数而不是构造函数；它返回一个不具有.get()方法的数组，因此会出现错误。

\n

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

\n

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

\n

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

\n