2015-06-18 110 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