get() method isn't working with D3 v6 and force layout

Question

i'm new to the D3.js and i'm trying to make same animation with my graph, but i can't resolve problem with get() method for D3 version 6. When i render the code it gets an error, like this: "nodeById.get is not a function" and i don't know how to fix. nodeById is a arr like this --> nodeById = ['Myriel', 'Napoleon']; the whole code is based on: 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),
         t = nodeById.get(link.target),**
         i = {}; // intermediate node
         nodes.push(i);
         links.push({
                    source: s,
                    target: i
                }, {
                    source: i,
                    target: t
                });
                bilinks.push([s, i, t]);
            });

If anybody can help?

Answer 1

Your problem is caused by some rather unfortunate re-design of the API. As of D3 v6 the d3-collection module was deprecated and removed from the D3 bundle. That module contained the d3.map() constructor method that would create a d3.map object, ie one of D3's internal map implementations mimicking the native JavaScript Map . This method has been around a while but has lost importance once ES6 feature became available and was therefore removed.

Sadly, with version 2 of the d3-array module a method with the same name was introduced which is basically equivalent to the native array.map() or Array.from() methods:

# d3. map ( iterable , mapper ) · Source

Returns a new array containing the mapped values from iterable , in order, as defined by given mapper function. Equivalent to array.map and Array.from :

Since d3-array v2 was introduced to the bundle with the same version 6 that also removed d3-collection the d3.map property is still available, however, its meaning has changed.

Your code seems to have been written for D3 <v6 and breaks because of the changes laid out above. The new d3.map() is a mapper function not a constructor; it returns an array which does not feature a .get() method, hence, the error.

To fix the issue you can change your code to directly use the built-in Map object instead:

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

With the rest untouched your code should be running as expected.