如何可視化沒有父/子數據結構的關係？

我正在處理從數據庫中提取的對象數組;本質上是一個csv文件。樣本對象是這樣的：如何可視化沒有父/子數據結構的關係？

var data = [ 
{ 
    "name" : "blah", 
    "number" : 1234, 
    "associate" : 2234 
}, 
{ 
    "name" : "blurg", 
    "number" : 2234, 
    "associate" : null 
}, 
{ 
    "name" : "blarg", 
    "number" : 3334, 
    "associate" : null 
} 
]

我想要做的，是畫有「關聯」，及其相應的對象之間的線路或路徑「父」，雖然它沒有結構作爲父母/兒童。

概念上，這是我在想什麼：

var diagonal = d3.svg.diagonal() 
.source(this) 
.target(dom_element_whose_number == d.associate);  

var filteredData = data.filter(function(d) { return d.associate }; 

svg.selectAll("path") 
    .data(filteredData) 
    .enter() 
    .append("path") 
    .attr("d", diagonal);

有什麼建議？我一直對此感到震驚......

來源

2013-07-17 lionade

你會需要某種結構的，告訴它是什麼源和目標。也就是說，對數據進行預處理，以使您擁有具有「源」和「目標」屬性的元素，並將其傳遞給「.data（）」。 –

你可以做一個遞歸樹遍歷和呈現節點一步一步。這也意味着您的數據必須被鏈接，否則如果節點數量增加，您將在數據集中反覆檢索子節點。

我寫了一個樹遍歷，我用過程中的幾個樹結構，以使（在我們自下而上的情況下 - 但遍歷可以在兩側使用）。不幸的是，它是用c＃編寫的，我現在不在辦公室，所以我不能發佈渲染器。如果您有興趣，我可以概述渲染器的工作原理。

來源

2013-07-17 04:51:18

我會對此非常感興趣！預處理的一些元素，似乎有必要用此數據... – lionade

我猜你需要的是畫一般的圖形（不樹形結構），但不知道如何佈局的節點和邊緣，使他們看上去並不像一團糟。

有一些圖形佈局算法在那裏。基本思想是將節點視爲相互排斥的對象（就像在物理學中一樣），以便圖形最大程度地擴展。

我發現這太問題有關： Graph auto-layout algorithm

如果你想更深入，這裏是一些關於這個問題的研究論文： https://graphics.stanford.edu/wikis/cs448b-12-fall/Graph_Layout_and_Network_Analysis

希望這有助於！

來源

2013-07-17 05:01:34 NeoWang

火炬由一個特別酷的演示是在這裏：http://flare.prefuse.org/demo – NeoWang

感謝這麼多的資源！我肯定會讀到這些......數據結構對我來說實際上是非常新的，因爲社交媒體人前端設計師走了數據可視化器......自動佈局系統正是我一直在尋找的東西，米將會強烈地看着那個。 – lionade

如何可視化沒有父/子數據結構的關係？

回答

相關問題