2015-06-18 109 views
4

考慮這個JSON對象:一個可視化JSON嵌套結構

{ department_1 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]} 
{ department_2 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]} 
{ department_3 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]} 
{ department_4 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]} 

顯然,這是一個嵌套的數據結構,而且有很多的記錄,在這個例子中,我們有大約2000條記錄的最深層次。以響應式和交互式的方式將此可視化的最佳方式是什麼?我已經使用過這張表,而且看起來並不那麼互動。我正在尋找想法和方法,並且可能會將一些示例實現視覺化,將可用性考慮在內。

+0

還有你想要什麼類型的數據進行交互..喜歡的數字可以查看圖表互動,但字符串不所以... –

+0

我會去一個類似於LINQPad(運行C#的工具)提供的界面。它具有很好的可視化大型對象圖的可視化方法,其中可以摺疊/展開子對象。在此處查看屏幕截圖:https://code.google.com/p/linqpadvisualizer/ – GolfWolf

+0

@VirajNalawade我正在尋找互動式的東西,並且自我介紹。我想用最少量的文本數據來表示數據。以我給出的例子爲例,當用戶進入頁面時,他面對着代表每個部門的4個形狀,單擊每個形狀將會消除3/4的其他數據,然後呈現每個代表一個元素的用戶形狀該部門內的陣列。 – EasyQuestions

回答

-1

試試Chart.js。您可以在線找到很多示例和教程。

這裏是文檔鏈接 http://www.chartjs.org/docs/

+1

chart.js沒有任何圖表以我需要的方式表示嵌套數據strcuture。請閱讀我在這個問題下的評論。 – EasyQuestions

0

嘗試Collapsible Tree Layout使用D3。 (從their gallery中挑選出來)

他們在頁面上有一個記錄良好的例子。

+0

這是非常接近我所期待的它很好地顯示嵌套的數據結構,它是交互式的,但我已經實現了,並希望使用交互式數據庫更現代的方法。請閱讀我上面的評論。 – EasyQuestions

0

下面是嵌套表的一個很好的可視化。它不是交互式的,但你可以通過文本區域轉換爲<textarea>使它這樣:

http://bl.ocks.org/nautat/4085017