樹佈局 - 鏈接 - 數據格式

我正在一個項目中，我想展示一個網站內的各種文件如何互相交互。我認爲這將是一個相當簡單的任務使用D3，但現在我想知道我的JSON數據是如何安排的。這裏是我的數據樣本：樹佈局 - 鏈接 - 數據格式

{ 
"pages" : [{ 
    "ID" : "1", 
    "name" : "config.xml", 
    "class" : "dvs", 
    "path" : "/config.xml", 
    "children" : [{"dvs":"2","dvs":"3","sites":"4","sites":"5"}] 
},{ 
    "ID" : "2", 
    "name" : "site-pages.xml", 
    "class" : "dvs", 
    "path" : "/pages/site-pages.xml", 
    "children" : [{"dvs":"1"}] 
},{ 
    "ID" : "3", 
    "name" : "customscripts.vm", 
    "class" : "sites", 
    "path" : "components/customscripts.vm", 
    "children" : [{"dvs":"1","sites":"4","sites":"5"}] 
},{ 
    "ID" : "4", 
    "name" : "badge.vm", 
    "class" : "sites", 
    "path" : "components/badge.vm", 
    "children" : [{"dvs":"1","sites":"3"}] 
},{ 
    "ID" : "5", 
    "name" : "price.vm", 
    "class" : "sites", 
    "path" : "components/price.vm", 
    "children" : [{"dvs":"1","sites":"3"}] 
}] 
}

我的計劃是使用該ID的顯示文件和類之間的鏈接顏色代碼的文件類型。當我開始尋找到d3.layout.tree（）我開始認識到，佈局似乎非常依賴於具有特定的數據模型，即：

{ "name" : "foo", 
    "children" : [{ 
    "name" : "bar", 
    "children" : [{ 
    }] 
    }] 
}

等，等，等

上午我正確地認爲傳入d3.layout.tree（）的數據必須匹配確切格式？最終，我希望能夠讓我的數據樹的每個節點可點擊，這會將該節點轉變爲圖的根節點，但也許這是不可能的？

任何關於數據格式和d3.layout.tree（）的指導/建議將不勝感激。

來源

2014-02-09 uberHasu

不，您不必遵循確切的格式。從你的描述來看，這聽起來像你會想要一張圖而不是一棵樹。你如何確定哪些頁面連接？ –

d3.layout.tree（）的一個選項是tree.links（節點），它在樹中的各個節點之間創建鏈接。我希望能夠通過將兒童ID與節點ID進行匹配來創建節點鏈接。 – uberHasu

我也有同樣的問題！ – 2017-08-23 05:39:41

至於你想製作一個選定的節點樹的新根，我發掘了這個fiddle，我開始把它放在一起。它很簡單，可以做很多事情來改善它，但它應該爲你提供一個合理的開始。

function click(d) {  
    update(d.depth == 0 ? root : d) 
}

來源

2014-02-09 23:04:17 FernOfTheAndes

樹佈局 - 鏈接 - 數據格式

回答

相關問題