解釋Mike Bostock節點解析循環

Question

我對JavaScript和d3相對比較陌生，但我對強制定向佈局非常感興趣。在邁克·博斯托克的力指向可視化效果，他傾向於使用下面的代碼（或類似）從一個鏈接列表解析節點：

var links = [ 
    {source: "A", target: "B"}, 
    {source: "B", target: "C"}, 
    {source: "C", target: "A"}]; 

var nodes = {}; 

links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
}); 

我徹底明白了什麼，他最終完成在這裏，我只是想了解的JavaScript在forEach循環語法更好（實際上，在所有）。如果有人能解釋，我會很感激。

這顯然是非常優雅的代碼，但我無法在互聯網上的任何地方找到解釋 - 我可能在我的搜索中缺少一個關鍵術語，所以我不情願地在這裏問這個問題。什麼是真正扔我送行：

• 什麼的||的兩側的兩個任務做，
• 每行（每個||左側）的第一次分配的順序：爲什麼是例如，link.source = nodes[link.source]而不是nodes[link.source] = link.source。

Answer 1

在下面的代碼

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

這意味着

link.source = nodes[link.source]

如果nodes[link.source]是不未定義。

如果nodes[link.source]是undefined那麼下面的塊將被執行。

(nodes[link.source] = {name: link.source})//assigning new value to nodes[link.source]

，如果你把它簡單的將是上面的值將被設置爲link.source

所以像：

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 等同於：

if (!nodes[link.source]) {//not undefined 
link.source = nodes[link.source]; 
} else { 
nodes[link.source] = {name: link.source} 
link.source = nodes[link.source]; 
} 

希望這可以幫助！

說明的評論

問題(a = b || c equates to a = b but if b is undefined make a = c, right?)

是

問題還有什麼沒有意義就是爲什麼這些任務的左側是鏈接。 source和link.target？那些已經定義好了，它們就是我們想要用節點填充的東西？

是的！你在這裏是正確的Those are already defined。 鏈接。源當前=「A」 塊執行後，每個link.source將指向一個對象，像這樣。 link.source = {name:A}

讓我知道你是否還有困惑。