可视化嵌套的JSON结构

Question

考虑这个JSON对象：

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

显然这是一种嵌套的数据结构，并且有许多记录，在这个例子中，最深层级别大约有2000个记录。在响应式和交互式方面，最好的可视化方式是什么？我已经使用了表格，但它看起来并不那么交互。我正在寻找想法、方法，以及可能的一些示例实现来考虑可用性问题并进行可视化。

- EasyQuestions

---

还有，您想要使哪种类型的数据交互式...例如数字可以在图表中看起来很交互式，但字符串则不行... - Viraj Nalawade

我会选择与LINQPad（一种运行C#的工具）提供的接口类似的接口。它有一种很好的方式来可视化潜在的大型对象图，其中子对象可以折叠/展开。请参见此处的屏幕截图：https://code.google.com/p/linqpadvisualizer/ - Cristian Lupascu

@VirajNalawade 我正在寻找一些互动和自我呈现的东西。我希望以最少的文本数据的方式来表示数据。以我所给出的例子为例，当用户进入页面时，他面对着代表每个部门的4个形状，点击每个形状将消除其他3/4的数据，然后呈现用户形状，每个形状代表该部门数组中的一个元素。 - EasyQuestions

@w0lf 这将最终成为一个 Web 应用程序，因此需要前端技术。 - EasyQuestions

@EasyQuestions 我知道。我只是提出了一种概念性的方法，以防你找不到现有的解决方案。如果我有一个能够实现你想要的功能的实现，我会将其发布为答案。 - Cristian Lupascu

@EasyQuestions：你能找到上述问题陈述的解决方案吗？我也在寻找这样的可视化功能。 - Vibha

Answer 1

尝试使用d3中的可折叠树状布局。 （从他们的画廊中筛选出来）

该页面上有一个文档良好的示例。

- Yaelet

---

这非常接近我所寻找的，它很好地展示了嵌套数据结构，并且是交互式的，但我已经实现了它，想要使用交互式数据容器的更现代方法。请阅读我上面的评论。 - EasyQuestions

@EasyQuestions 想知道你是否能找到更好的解决方案！ - user61871

Answer 2

这是一个漂亮的嵌套表格可视化展示。虽然它不具有交互性，但你可以通过将文本区域转换为<textarea>来实现交互功能。 http://bl.ocks.org/nautat/4085017

- Michael Matthew Toomim

Answer 3

这将为您提供一个类似于Regedit的树形视图。

http://jsonviewer.stack.hu/

- chiliNUT

Answer 4

我创建了一个 JSON 查看器和编辑器库。你可以在这里试用它：https://guifier.com/json
如果你喜欢这个库，请不要忘记在 GitHub 上给它点赞：https://github.com/maliknajjar/guifier
这是该库在 npm 上的链接： https://www.npmjs.com/package/guifier

- Malik Hamad Najjar

---

虽然这个链接可能回答了问题，但最好在这里包含答案的关键部分，并提供链接作为参考。仅有链接的答案如果链接页面发生变化，就可能失效。- 来自审核 - Harrison

Answer 5

尝试使用Chart.js。您可以在网上找到许多示例和教程。

这里是文档链接http://www.chartjs.org/docs/

- Anand

---

chart.js没有任何图表可以以我需要的方式表示嵌套数据结构。请阅读我的问题下面的评论。 - EasyQuestions