試圖D3節點從「平面」 JSON連接，使公司層次結構圖

Question

我試圖創建一個使用D3..using從這個例子的代碼公司層次圖：

http://bl.ocks.org/mbostock/2949981

是否有辦法從這個JSON創建圖表：

 links = [ 
     { 
      "Source": "1", 
      "Target": "2", 
     }, 
     { 
      "Source": "1", 
      "Target" : "3" 
     }, 
     { 
      "Source": "2", 
      "Target": "4", 
     }, 
     { 
      "Source": "2", 
      "Target": "5", 
     }, 
     { 
      "Source" : "3", 
      "Target" " "6" 
     } 
    ] 

     nodes = [ 
     { 
      "Id": "1", 
      "Name": "TEST NODE ONE", 
      "Url": "http://www.google.com" 
     }, 
     { 
      "Id": "2", 
      "Name": "TEST NODE TWO", 
      "Url": "http://www.yahoo.com" 
     }, 
     { 
      "Id": "3", 
      "Name": "TEST NODE THREE", 
      "Url": "http://www.stackoverflow.com" 
     }, 
     { 
      "Id": "4", 
      "Name": "TEST NODE FOUR", 
      "Url": "http://www.reddit.com" 
     } 
     { 
      "Id": "5", 
      "Name": "TEST NODE FIVE", 
      "Url": "http://www.stack.com" 
     } 
     { 
      "Id": "6", 
      "Name": "TEST NODE SIX", 
      "Url": "http://www.six.com" 
     } 

    ] 

我要讓每一個節點一個矩形，我可以把員工的名字，這是從「節點」 JSON。但是將每個節點與「鏈接」json中的數據連接起來。隨意修改鏈接json，讓它對你更有意義。

我也想使連接節點的直線垂直，但我最關心的是通過上面的json在頁面上顯示圖形。

感謝您的幫助。

Answer 1

您需要將links（它將節點的id關聯起來）轉換爲一個數組，該數組通過引用將nodes中的實際對象關聯起來。一個簡單的循環做到這一點：

var links = [ { "Source": "1", "Target": "2" }, ... ] 
var nodes = [ { "Id": "1", "Name": "TEST NODE ONE", "Url": "http://www.google.com" }, ... ] 

var cachedNodesById = {}; 
var linksBetweenNodeObjs = links.map(funciont(link) { 
    return { 
    source: nodeById(link.Source), 
    target: nodeById(link.Target) 
    }; 
}); 

function nodeById(id) { 
    // return the node if it's been found before, otherwise loop over the 
    // array to find it 
    if(cachedNodesById[id] != null) { return cachedNodesById[id]; } 
    else { 
    for(var i=0; i < nodes.length; i++) { 
     if(nodes[i].Id == id) { return cachedNodesById[id] = nodes[i]; } 
    } 
    } 
}