get() 方法不適用於 D3 v6 和強制布局

Question

我是 D3.js 的新手，我正在嘗試用我的圖表制作相同的 animation，但我無法解決 D3 版本 6 的 get() 方法的問題。當我渲染代碼時，它會出現錯誤，如下所示： “nodeById.get 不是函數”，我不知道如何解決。 nodeById 是這樣的 arr --> nodeById = ['Myriel', 'Napoleon']; 整個代碼基於： 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]);
            });

如果有人可以幫忙？

Answer 1

您的問題是由 API 的一些相當不幸的重新設計引起的。 從 D3 v6 開始， d3-collection模塊已被棄用並從 D3 包中刪除。 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 . 這種方法已經存在了一段時間，但是一旦 ES6 功能可用並因此被刪除，它就失去了重要性。

遺憾的是，在d3-array模塊的第 2 版中引入了一個同名的方法，它基本上等同於原生的array.map()或Array.from()方法：

# d3。 map （可迭代，映射器）·源碼

按給定映射器function 定義的順序返回包含來自iterable的映射值的新數組。 等效於array.map和Array.from ：

由於d3-array v2被引入具有相同版本 6 的捆綁包中，也刪除了d3-collection d3.map屬性仍然可用，但是，它的含義已經改變。

您的代碼似乎是為 D3 <v6 編寫的，並且由於上面列出的更改而中斷。 新的d3.map()是映射器 function 不是構造函數； 它返回一個不具有.get()方法的數組，因此會出現錯誤。

要解決此問題，您可以更改代碼以直接使用內置Map object 代替：

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

在 rest 不受影響的情況下，您的代碼應該按預期運行。